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={<CircularProgress />} noData={ <Stack direction={'column'} alignItems={'center'}> <DocumentText size={24} /> <Typography variant='subtitle2'>No PDF Imported</Typography> </Stack> } className={'disable-pdf-select'} options={options}
  {!disablePage && ( , 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):