pdfme: Cannot import `generate` in my Sveltekit project

Describe the bug

I try to integrate pdfme into my Sveltekit project. I copy paste the example code from the doc to the page.svelte and get an error SyntaxError: Cannot use import statement outside a module.

To Reproduce

Please check the integration in this online Sveltekit demo: https://www.sveltelab.dev/sqnh3ssj6s6te4m, or copy the below code in page.svelte.

<script lang="ts">
  import { generate, BLANK_PDF } from '@pdfme/generator'

  const template = {
    basePdf: BLANK_PDF,
    schemas: [
      {
        a: {
          type: 'text',
          position: { x: 0, y: 0 },
          width: 10,
          height: 10
        },
        b: {
          type: 'text',
          position: { x: 10, y: 10 },
          width: 10,
          height: 10
        },
        c: {
          type: 'text',
          position: { x: 20, y: 20 },
          width: 10,
          height: 10
        }
      }
    ]
  }

  function genPdf() {
    let date_now = new Date()
    // Generate the PDF ticket
    const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];

    generate({ template, inputs }).then((pdf) => {
      console.log(pdf)
      // Browser
      const blob = new Blob([pdf.buffer], { type: 'application/pdf' })
      window.open(URL.createObjectURL(blob))
    })

    console.log('finish pdf')
  }
</script>

    <button  on:click={() => { genPdf() }}>Generate PDF</button>

Expected behavior

No error Cannot use import statement outside a module

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui):2.2.0
- pdfme version:2.2.0
- Operating system: Linux
- Node.js version or Browser name & version: node v19.1.0, any browser
- @sveltejs/kit: 1.11.0

Your Error Log

[vite] Error when evaluating SSR module /src/routes/(pages)/checkout/+page.svelte: failed to import "@pdfme/generator"
|- /node_modules/.pnpm/@pdfme+generator@2.2.0_@pdfme+common@2.2.0/node_modules/@pdfme/generator/dist/esm/src/index.js:1
import generate from './generate.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1128:20)
    at Module._compile (node:internal/modules/cjs/loader:1169:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
    at Module.load (node:internal/modules/cjs/loader:1068:32)
    at Module._load (node:internal/modules/cjs/loader:909:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Internal server error: Cannot use import statement outside a module


### Additional context

_No response_

<!-- POLAR PLEDGE BADGE START -->
## Upvote & Fund

- We're using [Polar.sh](https://polar.sh/pdfme) so you can upvote and help fund this issue.
- We receive the funding once the issue is completed & confirmed by you.
- Thank you in advance for helping prioritize & fund our backlog.

<a href="https://polar.sh/pdfme/pdfme/issues/257">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://polar.sh/api/github/pdfme/pdfme/issues/257/pledge.svg?darkmode=1">
  <img alt="Fund with Polar" src="https://polar.sh/api/github/pdfme/pdfme/issues/257/pledge.svg">
</picture>
</a>
<!-- POLAR PLEDGE BADGE END -->

About this issue

  • Original URL
  • State: open
  • Created 10 months ago
  • Comments: 15

Most upvoted comments

I use typescript and my tsconfig is like that

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */
    "target": "ES2020",
    "lib": ["ES2020"],
    "module": "ES2020",
    "outDir": "./dist",
    "rootDir": "./src",
    "removeComments": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "strict": true,
    "skipLibCheck": true,
  },
}

And to successfully use the lib i needed to apply this patch, to both common and generator

diff --git a/node_modules/@pdfme/common/package.json b/node_modules/@pdfme/common/package.json
index 2725927..df0fc38 100644
--- a/node_modules/@pdfme/common/package.json
+++ b/node_modules/@pdfme/common/package.json
@@ -22,14 +22,8 @@
     "url": "https://github.com/pdfme/pdfme/issues"
   },
   "main": "dist/cjs/src/index.js",
-  "module": "dist/esm/src/index.js",
+  "module": "dist/cjs/src/index.js",
   "types": "dist/types/src/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/src/index.js",
-      "require": "./dist/cjs/src/index.js"
-    }
-  },
   "engines": {
     "node": ">=16"
   },