500 Server Error - Unexpected token ':'

[dirkcremers]

Hi all,

I'm working on a project structured with a main repository containing subfolders for different modules (including a Nuxt project as one of them).

When I try to use the jspdf library (version 3.0.1) within the Nuxt project and run the development server using npm run dev, I encounter the following error:

 ERROR  Unexpected token ':'

     at node_modules/jspdf/dist/jspdf.es.min.js:1632:undefined)
     at new Script (node:vm:117:7)
     at createScript (node:vm:269:10)
     at Object.runInThisContext (node:vm:317:10)
     at ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:341:17)
     at ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:321:14)
     at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
     at async ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:168:11)
     at async ViteNodeRunner.dependencyRequest (node_modules/vite-node/dist/client.mjs:216:10)
     at async pages/index.vue:3:31)
     at async ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:342:3)


 WARN  [Vue Router warn]: uncaught error during route navigation:


 ERROR  Unexpected token ':'

     at node_modules/jspdf/dist/jspdf.es.min.js:1632:undefined:undefined:undefined)
     at new Script (node:vm:117:7)
     at createScript (node:vm:269:10)
     at Object.runInThisContext (node:vm:317:10)
     at ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:341:17)
     at ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:321:14)
     at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
     at async ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:168:11)
     at async ViteNodeRunner.dependencyRequest (node_modules/vite-node/dist/client.mjs:216:10)
     at async pages/index.vue:3:31)
     at async ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:342:3)


 WARN  [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.

The error seems to point to an issue within the jspdf minified ES module file (jspdf.es.min.js) when processed by Vite/Nuxt's development server (vite-node).

Here is the code snippet I am using to generate the PDF with jspdf and html2canvas:

async function exportToPdf() {
  if (import.meta.client) {
    const pdf = new jsPDF("l", "mm", "a0"); // Landscape orientation, A0 size
    const element = document.getElementById("id");
    if (!element) return;

    const canvas = await html2canvas(element, {
      windowWidth: element.scrollWidth,
      windowHeight: element.scrollHeight,
      scale: 2, // Higher DPI
    });

    const imgData = canvas.toDataURL("image/png");
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

    pdf.addImage(imgData, "PNG", 0, 10, pdfWidth, pdfHeight);
    pdf.save("test.pdf");
  }
}

My setup uses:

• Nuxt 3
• jspdf version 3.0.1

Has anyone encountered a similar issue or have any suggestions on how to resolve this Unexpected token ':' error when using jspdf in a Nuxt development environment?

i tried several things, but nothing seemed to work yet.

Thanks!

[joeyyeoj]

Same issue here.
Best workaround seems to be to move the import inside your function for now, so at the top of your function add const { jsPDF } = await import('jspdf');, and remove the import from the top of the file.

[sebj54]

Instead, I'm forcing Vite to use the unminified version (which will be minified during build anyway)

Here is the workaround:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    resolve: {
      alias: {
        'jspdf': 'jspdf/dist/jspdf.es.js'
      }
    }
  }
})