Error rendering page with NextJS (14.0.3, 14.0.4 and 14.1.0)
Opened this issue · 4 comments
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/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16721:8)
mountLazyComponent
../node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18388:15)
beginWork$1
../node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/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
mui/material-ui#40214
aws-amplify/amplify-hosting#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 pdfjs-dist@3.11.174 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.