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

[cyrillef]

Before you start - checklist

• [x] I followed instructions in documentation written for my React-PDF version
• [x] I have checked if this bug is not already reported
• [x] I have checked if an issue is not listed in Known issues
• [x] 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

[email protected] 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/[email protected]/node_modules/pdfjs-dist/build/pdf.mjs (.next/server/vendor-chunks/[email protected]: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?

https://github.com/wojtekmaj/react-pdf/blob/d2ef804fe5ab2210aac796776418e680f1cdcd3b/sample/next-pages/pages/index.tsx#L3-L5

[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.