Open raibann opened 2 months ago
Same here it throws an error and the PDF is not rendered:
this worked for me
Check out this as well! Bun patch fixed it for me :D
https://github.com/vercel/next.js/issues/65406#issuecomment-2295783162
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
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'
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/', };
/**
Comp */ const CustPreviewPdf = ({ file, disablePage }: { file?: File | string; disablePage?: boolean }) => { /**
/**
} className={'disable-pdf-select'} options={options}
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