pdfjs-dist failed to load its dependency - Module not found: Package path . is not exported from package /node_modules/pdfjs-dist/node_modules/path2d-polyfill

[hpardess]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/pdf-viewer-v52xpl

To Reproduce

"use client"
import { useRef, useState } from 'react';
// import * as PDFJS from "pdfjs-dist";
import * as PDFJS from 'pdfjs-dist/build/pdf.min.mjs';

const TestPage = () => {
const [pdfPages, setPdfPages] = useState([]);

  const displayImage = async() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    const uint8Array = pdfPages[0];
    console.log(uint8Array)
    const pdfDoc = await PDFJS.getDocument(uint8Array);

    // Get the first page of the PDF document.
    const page = await pdfDoc.getPage(1);

    // Render the page to an image.
    const imageData = await page.render({
        canvasFactory: new PDFJS.CanvasFactory(),
    });

    // Put the image data on the canvas.
    ctx.putImageData(imageData, 0, 0);

    // Display the canvas.
    ctx.drawImage(canvas, 0, 0);
  };

return (
    <section className="pb-[120px] pt-[150px]">
<canvas ref={canvasRef} />
</section>
  );
};

export default TestPage;

Here is the error

 ⨯ ./node_modules/pdfjs-dist/build/pdf.min.mjs:21:262714
Module not found: Package path . is not exported from package /project/node_modules/pdfjs-dist/node_modules/path2d-polyfill (see exports field in /project/node_modules/pdfjs-dist/node_modules/path2d-polyfill/package.json)

https://nextjs.org/docs/messages/module-not-found

Current vs. Expected behavior

pdfjs-dist failed to load its dependency

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:55:06 PST 2023;
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

_NEXT-3323

[mmo80]

Check out my repo for similar bug. Got it working with api route but throws error when executing same code as a server action.

[timneutkens]

Seems this package never worked? Looking at the minified code there's a lot of highly dynamic import() calls. Seems it's meant to be loaded through a <script> tag or something like that, not being bundled by a bundler.

Here's a sandbox on 13.4.0 that has the exact same output: https://codesandbox.io/p/devbox/pdf-viewer-forked-l6qcpm?file=%2Fpackage.json%3A17%2C14&workspaceId=062b139a-c054-40fe-bbf5-0210d48b9dd0

[timneutkens]

Did some more digging and created a proper reproduction of what I think you mean with this issue: https://codesandbox.io/p/devbox/pdf-viewer-forked-vcf42f?file=%2Fnext.config.js%3A4%2C65

It's related to top level await breaking module loading in React Server Components. Still happens on 13.4.0 as well though. I've reached out to the React team about it.

[timneutkens]

Here's a version that uses import() to load pdfjs-dist only when it's needed:

https://codesandbox.io/p/devbox/pdf-viewer-forked-snfrd4?file=%2Fcomponents%2FTestPage.tsx%3A15%2C6.

We'll still work with the React team to fix the issue with top level await, but it's usually better to avoid loading that pdf library when the list of pdfs is empty for example.

When trying to run the library with Turbopack it highlighted another issue where webpackIgnore: true comments are used, we'll take a look at that as well.

[timneutkens]

Opened a separate issue for the Turbopack issue: #65406

[gurkerl83]

It seems PDF.js recognized issues with using top-level await in certain environments and has opted out of this strategy. For more information, please see here mozilla/pdf.js#18051

Maybe this helps,
Thx!