react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Published 20 hours ago • verified publisher icon wojtekmaj

Render breaks in nextjs 14.1.0 - ReferenceError: Can't find variable: exports leads to "Failed to load PDF file."

Open ptpittman opened this issue 1 year ago • 19 comments
trafficstars

Before you start - checklist

  • [X] I followed instructions in documentation written for my React-PDF version
  • [X] I have checked if this bug is not already reported
  • [X] I have checked if an issue is not listed in Known issues
  • [ ] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

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:

import { pdfjs } from "react-pdf";

import { Document, Page } from "react-pdf";
import "react-pdf/dist/Page/AnnotationLayer.css";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

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:

[Error] ReferenceError: Can't find variable: exports (pdf.worker.min.db5d8e2a.js, line 22)
[Error] ReferenceError: Can't find variable: exports
	Global Code (pdf.worker.min.db5d8e2a.js:22)
[Error] Warning: Error: Setting up fake worker failed: "undefined is not an object (evaluating 'window.pdfjsWorker.WorkerMessageHandler')".
	(anonymous function) (app-index.js:35)
	(anonymous function) (hydration-error-info.js:41)
	printWarning (warning.js:26)
	warning (warning.js:45)
	onLoadError (Document.js:315)
	(anonymous function) (Document.js:372)
	commitHookEffectListMount (react-dom.development.js:18071)
	commitHookPassiveMountEffects (react-dom.development.js:19742)
	commitPassiveMountOnFiber (react-dom.development.js:19826)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19889)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19918)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)
	commitPassiveMountOnFiber (react-dom.development.js:19824)
	recursivelyTraversePassiveMountEffects (react-dom.development.js:19808)

Environment

  • Browser (if applicable): All browsers
  • React-PDF version: 7.7.0
  • React version: 18.2.0
  • Webpack version (if applicable): Nextjs Default
  • Next.js: 14.1.0

ptpittman avatar Jan 19 '24 18:01 ptpittman

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.

wojtekmaj avatar Jan 19 '24 19:01 wojtekmaj

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?)

ptpittman avatar Jan 19 '24 19:01 ptpittman

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.

wojtekmaj avatar Jan 20 '24 15:01 wojtekmaj

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",

kevsjh avatar Jan 21 '24 13:01 kevsjh

Nice! Good workaround for now. Definitely points to their webpack optimizations continuing to do new wild and unplanned things.

ptpittman avatar Jan 21 '24 14:01 ptpittman

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';

lujun2 avatar Feb 03 '24 13:02 lujun2

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";

talhaibnmahmud avatar Feb 11 '24 06:02 talhaibnmahmud

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/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/terser/bundle.min.js:1:32780)

cyrus-za avatar Feb 19 '24 17:02 cyrus-za

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 avatar Feb 20 '24 13:02 jianyuan

@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.

wojtekmaj avatar Feb 21 '24 08:02 wojtekmaj

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.

ianschmitz avatar Feb 21 '24 23:02 ianschmitz

@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`

jianyuan avatar Feb 26 '24 22:02 jianyuan

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`;

// ...

thecil avatar Mar 06 '24 19:03 thecil

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.

github-actions[bot] avatar Jun 10 '24 00:06 github-actions[bot]

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>
  );
}

SebastienPingal avatar Jun 10 '24 08:06 SebastienPingal

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 avatar Jun 21 '24 16:06 AlfredMadere

@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

jianyuan avatar Jul 07 '24 14:07 jianyuan

@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

rahulgwebdev avatar Jul 18 '24 17:07 rahulgwebdev