-
-
Notifications
You must be signed in to change notification settings - Fork 899
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router #1855
Comments
this worked for me |
Check out this as well! Bun patch fixed it for me :D |
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:
with this
I switched to using the CDN, as specified in the docs Here is the screenshot |
I've encountered the same error too. Building on top of @satyadalei's solution. You can download the CDN and put it in the import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs Additionally, you might run into this error 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 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' |
Before you start - checklist
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/',
};
/**
/
const CustPreviewPdf = ({ file, disablePage }: { file?: File | string; disablePage?: boolean }) => {
/*
*/
const [totalPages, setTotalPages] = useState(0);
const [pageNumber, setPageNumber] = useState(1);
/**
*/
const onDocumentLoadSuccess = ({ totalPages }: { totalPages: number }) => {
setTotalPages(totalPages);
};
return (
<>
<Document
file={file}
onLoadSuccess={(value) => onDocumentLoadSuccess({ totalPages: value.numPages })}
loading={}
noData={
<Stack direction={'column'} alignItems={'center'}>
No PDF Imported
}
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
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
The text was updated successfully, but these errors were encountered: