Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router

[raibann]

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

import { Box, CircularProgress, Pagination, Stack, Typography } from '@mui/material'; import React, { useState } from 'react'; import { DocumentText } from 'iconsax-react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

const options = { cMapUrl: '/cmaps/', standardFontDataUrl: '/standard_fonts/', };

/**

• Comp */ const CustPreviewPdf = ({ file, disablePage }: { file?: File | string; disablePage?: boolean }) => { /**

  • States */ const [totalPages, setTotalPages] = useState(0); const [pageNumber, setPageNumber] = useState(1);

  /**

  • Methods */ const onDocumentLoadSuccess = ({ totalPages }: { totalPages: number }) => { setTotalPages(totalPages); }; return ( <> <Document file={file} onLoadSuccess={(value) => onDocumentLoadSuccess({ totalPages: value.numPages })} loading={} noData={ <Stack direction={'column'} alignItems={'center'}>

    <Typography variant='subtitle2'>No PDF Imported</Typography>

    } className={'disable-pdf-select'} options={options}

    {!disablePage && ( <Box sx={{ py: 1 }}> <Pagination count={totalPages} onChange={(event: React.ChangeEvent, page: number) => { setPageNumber(page); }} /> )} </> ); };

export default CustPreviewPdf;

Steps to reproduce

                                                                                           ^^^^^^
`----

Caused by: 0: failed to parse input file 1: Syntax Error

Build failed because of webpack errors when I install react pdf version 9.1.0 it can't build.

Expected behavior

⨯ node_modules/pdfjs-dist/build/pdf.mjs (5448:0) @ eval ⨯ TypeError: Promise.withResolvers is not a function at webpack_require (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/webpack-runtime.js:33:43) at eval (./src/components/customs/media/CustPreviewPdf.tsx:17:67) at (ssr)/./src/components/customs/media/CustPreviewPdf.tsx (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/app/new-document/page.js:642:1) at webpack_require (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/webpack-runtime.js:33:43) at eval (./src/app/new-document/components/qrcode/index.tsx:13:98) at (ssr)/./src/app/new-document/components/qrcode/index.tsx (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/app/new-document/page.js:433:1) at webpack_require (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/webpack-runtime.js:33:43) at eval (./src/app/new-document/page.tsx:27:76) at (ssr)/./src/app/new-document/page.tsx (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/app/new-document/page.js:543:1) at webpack_require (/Users/raibann/Documents/ONLINEISP/PROJECTS/FRONTEND/next-document-tracking/.next/server/webpack-runtime.js:33:43) at JSON.parse () null

Actual behavior

Additional information

Environment

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

[orlando-aidora]

Same here it throws an error and the PDF is not rendered:

[UmairJibran]

this worked for me

[kristianeboe]

Check out this as well! Bun patch fixed it for me :D

https://github.com/vercel/next.js/issues/65406#issuecomment-2295783162

https://bun.sh/docs/install/patch

[satyadalei]

I encountered the same error when using react-pdf in my Next.js (version 14) app during the build phase. It was working perfectly in development, but the error appeared during the production build.

@UmairJibran made a valid point, and while his solution might work for some, it didn't solve the issue for me. I fixed by replacing the following line:

 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
   import.meta.url,
 ).toString();

with this

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

I switched to using the CDN, as specified in the docs

Here is the screenshot

[scaabel]

I've encountered the same error too.

Building on top of @satyadalei's solution.

You can download the CDN and put it in the public directory and call it like this.

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs

Additionally, you might run into this error [ERROR] Promise.withResolvers is not a function Stack trace:

So, you have to add the polyfill

  // Polyfill
  // NOTE: pdfjs-dist is throwing Promise.withResolvers is not a function
// This is a workaround to fix the issue
if (typeof Promise.withResolvers !== 'function') {
  Promise.withResolvers = function <T>() {
    let resolve!: (value: T | PromiseLike<T>) => void
    let reject!: (reason?: any) => void
    const promise = new Promise<T>((res, rej) => {
      resolve = res
      reject = rej
    })
    return { promise, resolve, reject }
  }
}

export {}

Make sure to declare the type in your declaration.d.ts

 interface PromiseConstructor {
  withResolvers<T>(): {
    promise: Promise<T>
    resolve: (value: T | PromiseLike<T>) => void
    reject: (reason?: any) => void
  }
}

Your component should look something like this

 import 'path/to/polyfill'
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'