react-pdf-js
react-pdf-js copied to clipboard
mikecousins
Error rendering page with NextJS (14.0.3, 14.0.4 and 14.1.0)
Hello, I'm trying to render a pdf in a NextJS project. I created a client component inside a page and I have the starting code to show the PDF. I'm getting the following error:
Error: Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.
Call Stack
mountLazyComponent
../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16721:8)
mountLazyComponent
../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18388:15)
beginWork$1
../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26791:13)
Apparently this issue also happened with material-ui and amplify with the same version of next https://github.com/mui/material-ui/issues/40214 https://github.com/aws-amplify/amplify-hosting/issues/3847
I tried downgrading to 14.03 and updating to 14.1 but neither fixed the error, did anyone manage to make it work with NextJS?
Update: it appears to be caused by the import of the pdfjs-dist library, still trying to make it work
Downgrading to [email protected] fixes the issue. Also updating the workerSrc to "//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js" because the cloudflare url was giving CORS errors on local dev, I can do a pull request if needed.
Did you open a ticket with pdfjs by any chance? If downgrading works then it might be an issue with upstream? I just hit the same error directly importing pdfjs-dist.
