v14.2.8 breaks pdfjs, 'canvas' not found

[JClackett]

Link to the code that reproduces this issue

https://github.com/JClackett/next-pdf-canvas

To Reproduce

run the dev or build command, you'll get an error.

Current vs. Expected behavior

Not break

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 18.20.4
  npm: 10.7.0
  Yarn: 1.22.19
  pnpm: 8.15.7
Relevant Packages:
  next: 14.2.9 // Latest available version is detected (14.2.9).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

Reverting to 14.2.7 works, so something in 14.2.8 broke this.

You can see from my builds that as soon as it updated, it failed the builds.

[huozhi]

Hi, noticed that you're using a pretty old version of pdf.js where it tries to call require('canvas') in the same bundle which mixing browser and Node.js code.

You can either install canvas itself or just put pdfjs-dts in experimental.serverComponents config so that bundler won't try to include it.

module.exports = {
  experimental: {
     serverComponentsExternalPackages: ['pdfjs-dts']
  }
}

This will temporarily work around on it. We're workig on better solution for it as the latest pdfjs-dts (v4) version also requires some bundler handling for .node binaries.

[JClackett]

Okay good to know, yeah im using the older version because the newer version uses some newer JS syntax and it seems a lot of my customers browsers dont like that, even with polyfills

[JClackett]

So its working in the repro now, but in my actual project im still getting the same error, even with updating the next config:

experimental: {
  serverComponentsExternalPackages: ["pdfjs-dist"],
},

getting this:

Error: ./node_modules/.pnpm/[email protected]/node_modules/pdfjs-dist/build/pdf.js:10926:20
Module not found: Can't resolve 'canvas'
  10924 | class NodeCanvasFactory extends _base_factory.BaseCanvasFactory {
  10925 |   _createCanvas(width, height) {
> 10926 |     const Canvas = require("canvas");
        |                    ^^^^^^^^^^^^^^^^^
  10927 |
  10928 |     return Canvas.createCanvas(width, height);
  10929 |   }

Something to do with pnpm or pnpm workspaces?

Thats the only real setup difference between the two repos.

[JClackett]

Okay, it seems to be do with using turbo on the next dev server, if I dont use turbo it works again? have updated the repro to use turbo and it breaks in local again

[huozhi]

We ship a fix to 14.2.14, can you try upgrading Next.js to that version? 🙏