Render breaks in nextjs 14.1.0 - ReferenceError: Can't find variable: exports leads to "Failed to load PDF file." #1699
Comments
|
If the package worked before and stopped working without any changes on our side, it's a Next.js regression and should be reported to them. I'm not surprised this happened, they notoriously break packages because of the amount of hacks they ship to production. |
|
No doubt - they're playing around a lot with barrel import optimization at the moment and Material UI was broken entirely for 14.0.4. But to help me take this up with them, I do see various tickets throughout history related to pdfjs's lack of a default export sometimes causing problems. Looking at the code these days, it doesn't seem to be the case – is there anything I should look more closely at? (My import method above is correct, right?) |
|
I'm curious how #1690 would perform now that PDF.js is ESM first. Unfortunately we're not ready for a pre-release even, let alone full release. |
|
i was facing the same issue as well in nextjs 14.1.0. Changing the import worker to external cdn fixes it for me
"react-pdf": "^7.7.0", |
|
Nice! Good workaround for now. Definitely points to their webpack optimizations continuing to do new wild and unplanned things. |
|
instead of CDN, I use local assets instead // package.json
{
"script": {
"postinstall": "node ./postinstall.js"
}
}// postinstall.js
const path = require('path');
const fs = require('fs');
const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
const pdfWorker = path.join(pdfjsDistPath, 'build', 'pdf.worker.min.js');
fs.copyFileSync(pdfWorker, './public/js/pdf.worker.min.js');// PDFViewer.tsx
'use client';
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.min.js'; |
I used a slightly modified version and resolved the issue for me (with {
"script": {
"postinstall": "bun ./scripts/postinstall.mjs"
}
}// scripts/postinstall.mjs
import fs from "node:fs";
import path from "node:path";
const pdfjsDistPath = path.dirname(
path.resolve("node_modules/pdfjs-dist/package.json")
);
const pdfjsWorkerPath = path.join(pdfjsDistPath, "build", "pdf.worker.min.js");
fs.copyFileSync(pdfjsWorkerPath, "public/pdf.worker.min.js");"use client";
pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.js"; |
|
I am running into this and switching to a CDN does change the error message but it still has an error. See nrwl/nx#21611 I also tried the script to copy the file to 739.js from Terser
Unexpected token: punc ({) [739.js:4502,26]
at js_error (node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js:1:32780) |
|
Alternatively, I solved this by using the // next.config.js
const path = require("path")
const CopyPlugin = require("copy-webpack-plugin")
/** @type {import('next').NextConfig} */
const nextConfig = {
// ...
webpack: (config) => {
config.plugins.push(
new CopyPlugin({
patterns: [
{
from: require.resolve("pdfjs-dist/build/pdf.worker.min.js"),
to: path.join(__dirname, "public/static/js"),
},
],
}),
)
}
}Then, pdfjs.GlobalWorkerOptions.workerSrc = "/static/js/pdf.worker.min.js" |
|
@jianyuan Your solution looks REALLY good! I think it can be safely recommended as a secondary option if the primary one doesn't work well. |
|
Does |
|
@ianschmitz You can include the version in the filename: // next.config.js
const path = require("path")
const CopyPlugin = require("copy-webpack-plugin")
const pdfjs = require('react-pdf')
/** @type {import('next').NextConfig} */
const nextConfig = {
// ...
webpack: (config) => {
config.plugins.push(
new CopyPlugin({
patterns: [
{
from: require.resolve("pdfjs-dist/build/pdf.worker.min.js"),
to: path.join(__dirname, `public/static/js/pdf.worker-${pdfjs.version}.min.js`),
},
],
}),
)
}
}Then, pdfjs.GlobalWorkerOptions.workerSrc = `/static/js/pdf.worker-${pdfjs.version}.min.js` |
This solution worked for me on production (vercel). Thanks @kevsjh. next.config.mjs then at my |
|
This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days. |
|
I'm having the same issue, doing thecil's suggestion didn't help. 'use client'
import { useState } from 'react';
import { Document, Page } from 'react-pdf';
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
export function PDFReader({url}: {url: string}) {
const [numPages, setNumPages] = useState<number>();
const [pageNumber, setPageNumber] = useState<number>(1);
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}
return (
<div>
<Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
);
} |
For some reason next.config.js can't find "pdfjs-dist/build/pdf.worker.min.js". I get this error with your exact configuration. I have verified that pdfjs-dist is installed. |
|
@AlfredMadere It seems that the file extension has changed from mozilla/pdf.js#18160 |
|
@ptpittman lock the react-pdf version at 7.7.1 in your next 14 project // next.config.mjs Import this where you need, in my project imported in global layout let me know if that works |
|
This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days. |
I have the same problem, I updated my "terser-webpack-plugin" version to "^5.3.10" and it works. |
Before you start - checklist
Description
I have a site using nextjs app dir, rendering PDFs in a client component. Was working fine up to 14.0.3. Upgrading to 14.1.0, it now throws an error on client side and cannot load the PDF.
Minimally, my components loads the following outside of the component:
As recommended in docs. I tried moving the pdfjs.GlobalWorkerOptions line into a useEffect to fire on load but this only delayed the error slightly.
I build and deploy using pnpm. I noted the instruction in the docs to add a .npmrc with "public-hoist-pattern[]=pdfjs-dist", which I hadn't previously had or apparently needed, but this doesn't resolve the issue.
Steps to reproduce
No public reproduction as I had to revert. Can deploy a test repo if needed.
Expected behavior
PDF displays first page
Actual behavior
Page displays "Failed to load PDF file", browser console
Additional information
Console errors are as follows:
Environment
The text was updated successfully, but these errors were encountered: