1

Thanks in advance for any help.

TL;DR: I have a parse error at build time bubbling from node-canvas and pdf.js. This is caused by Rollup reading the canvas.node binary, which shouldn't even be in the build output...

Is there any way to mark an individual module (pdf.js) for browser resolution? Or any other solution/work-around to allow pdf.js to work with pnpm?

I believe that the accepted solution in the node-canvas repo will not work here as the SvelteKit build should produce outputs for both node and the browser.


I've swapped my package manager to pnpm for a SvelteKit app.

It has been great when running in dev mode, but the build is now failing with these raw logs:

node_modules/.pnpm/pdfjs-dist@3.9.179/node_modules/pdfjs-dist/build/pdf.js (1950:23)
Use of eval in "node_modules/.pnpm/pdfjs-dist@3.9.179/node_modules/pdfjs-dist/build/pdf.js" is strongly discouraged as it poses security risks and may cause issues with minification.

# ... succesful build outputs
.svelte-kit/output/server/index.js                                                                                                    104.13 kB
.svelte-kit/output/server/entries/pages/room/_room_/_page@room.svelte.js                                                              125.46 kB
.svelte-kit/output/server/chunks/media-handlers.js                                                                                    145.42 kB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-node
error during build:
RollupError: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
    at error (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at Module.error (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:13674:16)
    at Module.tryParse (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:14405:25)
    at Module.setSource (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:14006:39)
    at ModuleLoader.addModuleSource (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:24526:20)
 ELIFECYCLE  Command failed with exit code 1.

The error is bubbling from this rollup.js error() function which is hiding some of the info.

After editing node_modules to console.trace on the base, we have additional info:

Trace: {
  cause: SyntaxError: Unexpected character '' (1:0) # <-- contains U+007f, invisible
  # ...
  code: 'PARSE_ERROR',
  id: '/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/canvas.node',
  message: "Unexpected character '\x7F' (Note that you need plugins to import files that are not JavaScript)",
  frame: '1: \x7FELF\x02\x01\x01\x00\x00\x00\x00\x00\x'
   # ...
}
# ...

# Listing each of the ids in the trace: 

/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/canvas.node
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/bindings.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/index.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/image.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/canvas.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/context2d.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/pattern.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/pdfjs-dist@3.9.179/node_modules/pdfjs-dist/build/pdf.js

My interpretation is that Rollup is evaluating the canvas-node binary at build time. This is unfortunate, because it should not be needed at all, the pdf.js package is only being bundled for the browser.

I am also not sure why this behaviour would be caused by swapping the package manager from npm to pnpm though.

I've hit a wall trying to resolve or workaround this issue, outside of swapping back to npm so any advice would be sincerely appreciated. Thank you!

Oscar Hermoso
  • 302
  • 2
  • 12

1 Answers1

0

Ok, figured it out.

I'm only using pdf.js in the browser, so I'm able to exclude node-canvas by marking it as an optional dependency and then skipping it in CI/CD.

There may have also an issue/incompatibility with pdf-js version ^3.9.179

Steps to resolve:

  1. Add "canvas": "*" to optionalDependencies in package.json
  2. Update pdfds-dist to latest version (currently v3.10.111)
  3. rm -rf node_modules
  4. pnpm install to update the pnpm-lock.yaml file
  5. Test with pnpm --no-optional followed by pnpm build
  6. Update your CI/CD pipeline or Dockerfile to include pnpm install --no-optional instead of pnpm install.
Oscar Hermoso
  • 302
  • 2
  • 12