Open ptpittman opened 6 months ago
wojtekmaj
commented
6 months ago 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.
ptpittman
commented
6 months ago 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?)
wojtekmaj
commented
6 months ago 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.
kevsjh
commented
6 months ago i was facing the same issue as well in nextjs 14.1.0. Changing the import worker to external cdn fixes it for me
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
"react-pdf": "^7.7.0", "next": "^14.1.0",
ptpittman
commented
6 months ago Nice! Good workaround for now. Definitely points to their webpack optimizations continuing to do new wild and unplanned things.
lujun2
commented
6 months ago 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';
talhaibnmahmud
commented
5 months ago 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 bun)
{
"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";
cyrus-za
commented
5 months ago I am running into this and switching to a CDN does change the error message but it still has an error. See https://github.com/nrwl/nx/issues/21611
I also tried the script to copy the file to /public but same issue.
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)
jianyuan
commented
5 months ago Alternatively, I solved this by using the copy-webpack-plugin.
// 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.
ianschmitz
commented
5 months ago Does /static/js have an aggressive Cache-Control header like /static/chunks does? If so this would break in the future when this worker file changes as it would be cached and not fetched.
jianyuan
commented
5 months ago @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`
thecil
commented
5 months ago i was facing the same issue as well in nextjs 14.1.0. Changing the import worker to external cdn fixes it for me
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;"react-pdf": "^7.7.0", "next": "^14.1.0",
This solution worked for me on production (vercel). Thanks @kevsjh.
"next": "14.1.0",
"react-pdf": "^7.7.1",next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.resolve.alias.canvas = false;
return config;
}
};
export default nextConfig;
then at my PreviewDocument.tsx component
"use client";
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`;
// ...
github-actions[bot]
commented
1 month ago 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.
SebastienPingal
commented
1 month ago I'm having the same issue, doing thecil's suggestion didn't help. I'm trying to render something that is located in my blob storage, could the error come from there ?
'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>
);
}
AlfredMadere
commented
1 month ago Alternatively, I solved this by using the
copy-webpack-plugin.// 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"
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.
Error: Cannot find module 'pdfjs-dist/build/pdf.worker.min.js'
Require stack:
- /Users/alfred/Projects/ProjectElephant/nextJsRag/next.config.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1224:15)
at /Users/alfred/Projects/ProjectElephant/nextJsRag/node_modules/next/dist/server/require-hook.js:55:36@AlfredMadere It seems that the file extension has changed from .js. to .mjs. Can you try pdfjs-dist/build/pdf.worker.min.mjs?
https://github.com/mozilla/pdf.js/pull/18160 https://www.npmjs.com/package/pdfjs-dist?activeTab=code
rahulgwebdev
commented
2 weeks ago @ptpittman lock the react-pdf version at 7.7.1 in your next 14 project Rest follow the documentation
// next.config.mjs
const nextConfig = {
webpack: (config) => {
config.resolve.alias.canvas = false
return config
},
}; export const useLoadPdfWorker = () => {
React.useEffect(() => {
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.js',
import.meta.url,
).toString();
}, [])
}Import this where you need, in my project imported in global layout
let me know if that 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