CODEWITHSUNDEEP
sveltepdf.jsrollupjspnpmnode-canvas
Oscar Hermoso
Oscar Hermoso

Reputation: 480

Build fails after swapping to pnpm: RollupError: Unexpected character '\x7F' (caused by parse error in node-canvas / pdf.js)

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/[email protected]/node_modules/pdfjs-dist/build/pdf.js (1950:23)
Use of eval in "node_modules/.pnpm/[email protected]/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_/[email protected]                                                              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/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at Module.error (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13674:16)
    at Module.tryParse (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14405:25)
    at Module.setSource (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14006:39)
    at ModuleLoader.addModuleSource (file:///home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/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/[email protected]/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/[email protected]/node_modules/canvas/build/Release/canvas.node
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/canvas/lib/bindings.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/canvas/index.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/canvas/lib/image.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/canvas/lib/canvas.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/canvas/lib/context2d.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/node_modules/canvas/lib/pattern.js
/home/oscarhermoso/Git/org-repo/node_modules/.pnpm/[email protected]/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!

Upvotes: 1

Views: 889

Answers (1)

Oscar Hermoso
Oscar Hermoso

Reputation: 480

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 install --no-optional followed by pnpm build
  6. Update your CI/CD pipeline or Dockerfile to include pnpm install --no-optional instead of pnpm install.

Upvotes: 0

Related Questions