next/dynamic behavior breaking in nextjs 13.5 while using package pdfjs-dist

[subodhpareek18]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/stoic-frog-9jvh89?file=%2Fapp%2Fpage.tsx%3A5%2C1

To Reproduce

1. Visit the url above
2. Notice the following error

Current vs. Expected behavior

I have a component that depends on pdfjs-dist to do some in browser pdf operations. First I create a base component with use client; and then in another wrapper component I import it dynamically with ssr false, and that wrapped component gets used everywhere else.

import dynamic from "next/dynamic";

export const PdfUpload = dynamic(() => import("./pdf-upload-base"), {
  ssr: false,
  loading: () => <input disabled type="file" accept="application/pdf" />,
});

In the previous version of nextjs I was using 13.4.19 the same exact code was working as expected and the package pdfjs-dist was lazily loading correctly. After upgrading nextjs to version 13.5 the behvaiour is breaking and it's trying to execute the code on server causing this issue.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
Binaries:
  Node: 18.13.0
  npm: 8.19.3
  Yarn: 1.22.19
  pnpm: 8.7.0
Relevant Packages:
  next: 13.5.3
  eslint-config-next: 13.5.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router, Dynamic imports (next/dynamic)

Additional context

The same issue is reproduced in codesandbox also, haven't tried pushing it to production on vercel but I'm guessing the same thign will happen there also.

[March-mitsuki]

Same issue here. I use nextjs 13.5.3

[simpros]

+1, also on my side. Build fails with this error message

../../node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/bindings.js
Module not found: Can't resolve '../build/Release/canvas.node'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
../../node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/index.js
../../node_modules/.pnpm/pdfjs-dist@3.11.174/node_modules/pdfjs-dist/build/pdf.js
../../node_modules/.pnpm/react-pdf@7.4.0_@types+react@18.2.14_react-dom@18.2.0_react@18.2.0/node_modules/react-pdf/dist/esm/pdfjs.js
../../node_modules/.pnpm/react-pdf@7.4.0_@types+react@18.2.14_react-dom@18.2.0_react@18.2.0/node_modules/react-pdf/dist/esm/index.js
../../libs/mlm-document/src/lib/desktop-pdf-viewer.tsx
../../libs/mlm-document/src/lib/document-player.tsx
> Build failed because of webpack errors

[amytych]

I experience the same issue with react-json-view, previously const ReactJson = dynamic(import("react-json-view"), { ssr: false }) worked as expected, in version 13.5.3 I get:

ReferenceError: document is not defined
    at Module.<anonymous> (/vercel/path0/node_modules/react-json-view/dist/main.js:1:81443)
    at n (/vercel/path0/node_modules/react-json-view/dist/main.js:1:387)
    at Object.<anonymous> (/vercel/path0/node_modules/react-json-view/dist/main.js:1:18423)
    at n (/vercel/path0/node_modules/react-json-view/dist/main.js:1:387)
    at /vercel/path0/node_modules/react-json-view/dist/main.js:1:1186
    at /vercel/path0/node_modules/react-json-view/dist/main.js:1:1196
    at /vercel/path0/node_modules/react-json-view/dist/main.js:1:81
    at Object.<anonymous> (/vercel/path0/node_modules/react-json-view/dist/main.js:1:253)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)

interestingly build fails only on Vercel, locally it succeeds

[ApacheEx]

got the same issue as in the comment above, looks like the issue is reproducible since v13.5.1

p.s as workaround downgrading to next@13.4.19 helps to fix it.

[jerocosio]

Also got the same error, for me it started happening on version 13.5.4, if I downgrade to 13.5.3 the issue goes away and the package I'm using are: react-pdf as well as @react-pdf/renderer

[subodhpareek18]

For me the issue started on 13.5.3 and downgrading to 13.4.19 kept it working. Didn't try pushing to production since it failed on dev on both local and codesandbox repro

[dendrofen]

Also same situation with react-konva, on 13.5.6

[simpros]

did anyone found a workaround this? :)

[higbee4]

For anyone getting the ReferenceError: document is not defined error when using a ssr: false dynamic import with Next >= 13.5, try using the nodejs runtime. As soon as I switched to that from the edge runtime it started working for me.

Remove this line or change it to 'nodejs'. export const runtime = 'edge';

[simpros]

Any updates on this?

[rquigley]

Add the following to your next.config.js:

webpack: (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,

    canvas: false,
  };
  return config;
},

This instructs webpack to ignore the canvas module and successfully resolves the issue in the linked sandbox.