pdfjs-dist - DOMMatrix is not defined in the next-pages sample

[cyrillef]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

This is a follow-up on issue #1999.
I extracted the next-pages/ sample located at 'https://github.com/wojtekmaj/react-pdf/tree/main/sample/next-pages'
I ran
npm install
npm install --save typescript react-pdf
npm install --save-dev @types/node @types/react
npm run build

react-pdf-sample-page-next@4.0.0 build
next build

⚠ The "experimental.esmExternals" option has been modified. experimental.esmExternals is not recommended to be modified as it may disrupt module resolution. It should be removed from your next.config.ts.
▲ Next.js 15.5.6

• Experiments (use with caution):
  · esmExternals: "loose"
  · extensionAlias

✓ Linting and checking validity of types
Creating an optimized production build ...
✓ Compiled successfully in 431ms
Collecting page data ..Warning: Please use the legacy build in Node.js environments.
[ReferenceError: DOMMatrix is not defined]

Build error occurred
[Error: Failed to collect page data for /Sample] { type: 'Error' }

Steps to reproduce

instructions present in the description

Expected behavior

Build and Run works as documented

Actual behavior

Failed in npm run build

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Bundler name and version (if applicable):

[Kasui92]

Same here. I'm using v10.1.0 on nextjs v15.5.6 and react 19.2.0.

Warning: Please use the `legacy` build in Node.js environments.
Warning: Please use the `legacy` build in Node.js environments.
 ⨯ ReferenceError: DOMMatrix is not defined
    at (ssr)/./node_modules/.pnpm/pdfjs-dist@5.3.93/node_modules/pdfjs-dist/build/pdf.mjs (.next/server/vendor-chunks/pdfjs-dist@5.3.93.js:20:1)
    at eval (webpack-internal:///(ssr)/./src/components/File/PdfViewer/index.jsx:9:67)
    at (ssr)/./src/components/File/PdfViewer/index.jsx (.next/server/app/(crm)/crm/dashboard/page.js:3089:1)
    at eval (webpack-internal:///(ssr)/./src/context/FileViewerContext.jsx:20:85)
    at (ssr)/./src/context/FileViewerContext.jsx (.next/server/app/(crm)/crm/dashboard/page.js:4024:1) {
  digest: '3266497332'
}

[wojtekmaj]

Did you remember to use ssr: false in Pages router?

react-pdf/sample/next-pages/pages/index.tsx

Lines 3 to 5 in d2ef804

	const Sample = dynamic(() => import('./Sample.js'), {
	ssr: false,
	});

[Kasui92]

Did you remember to use ssr: false in Pages router?

I'm having the same problem with App Router. Is it necessary to do this as well?

[wojtekmaj]

Yes, as per provided samples. Rendering canvas on the server side is deemed to fail :)

[Kasui92]

Yes, as per provided samples. Rendering canvas on the server side is deemed to fail :)

I confirm, by importing the component as suggested, I no longer get the error.
I should have read the docs more carefully! 😅 Thanks!

[wojtekmaj]

I can confirm that on Pages router, it doesn't seem to work in Next.js. I would suggest filing an issue against Next.js repository, because with ssr: false Next.js isn't supposed to try and run pdfjs-dist on the server, which is the reason for the error you're seeing.

[cjroebuck]

I had to stay on 9.2.1 of react-pdf to get this to work. v10.2.0 did not load properly when using the ssr:false/dynamic import in pages router.