PDFjs-dist error

[nike1v]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• 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 had used previous version of your library and though of using it as base for my needs since it doesn't cover all points that is required by my tasks. But since the update to 9.0.0 i do have this issue whenever I try to import anything from your library of pdfjs-dist. I know that this is not particularly your issue, but maybe you do know the solution for this.

Steps to reproduce

import anything from react-pdf or pdfjs-dist

Expected behavior

component loads without errors

Actual behavior

When pdfjs-dist is imported from react-pdf (or components that use pdfjs-dist) or even the pdfjs-dist is imported, the error occures:

Additional information

No response

Environment

• Browser (if applicable): Chorme latest, Arc Windows latest
• React-PDF version: 9.0.0 (pdfjs-dist 4.3.136)
• React version: 18.3.1
• Webpack version (if applicable): nextjs 14.2.3

[wojtekmaj]

What do you set workerSrc to?

[nike1v]

I have tried the way with //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs and the recomended by you new URL...

[nike1v]

The problem is TurboPack in my case, since without turbo it works as it should.

[nike1v]

Also I do have some functional that I need to use, so I have some questions:
Does your library is capable of working with forms? Extracting, prefilling with data.
Does your library can work with Toolbar (pages, scale, search, document properties)?
Does your library have flag for forms that will bake them READ-ONLY and block all fields?
If no, I would like to contribute or I will have to do it myself.
Thanks in advance!

[DonikaV]

+1 in version 9.00, before was working fine

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();

Module not found: Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs'

[nike1v]

+1 in version 9.00, before was working fine

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();

Module not found: Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs'

Have you tried dev mode without TurboPack?

[DonikaV]

+1 in version 9.00, before was working fine

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();

Module not found: Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs'

Have you tried dev mode without TurboPack?

I am not using turbopack

[DonikaV]

Ok, so
remove node_modules
clean yarn.lock file
yarn install
Works with 9.0.0, but before I did the same and didn't worked. I don't know ...

[nike1v]

Ok, so remove node_modules clean yarn.lock file yarn install Works with 9.0.0, but before I did the same and didn't worked. I don't know ...

As you said, probably some cache issues, glad it worked.

[DonikaV]

Ok, so remove node_modules clean yarn.lock file yarn install Works with 9.0.0, but before I did the same and didn't worked. I don't know ...

As you said, probably some cache issues, glad it worked.

The build failing in GitHub Action and locally now, but next dev works
Creating an optimized production build ...
Failed to compile.

static/media/pdf.worker.min.9b170941.mjs from Terser
  x 'import', and 'export' cannot be used outside of module code
    ,-[18:1]
 18 |  *
 19 |  * @licend The above is the entire license notice for the
 20 |  * JavaScript code in this page

Also it puts content of the file in to the terminal during the build

[nike1v]

Ok, so remove node_modules clean yarn.lock file yarn install Works with 9.0.0, but before I did the same and didn't worked. I don't know ...

As you said, probably some cache issues, glad it worked.

The build failing in GitHub Action and locally now, but next dev works Creating an optimized production build ... Failed to compile.

static/media/pdf.worker.min.9b170941.mjs from Terser
  x 'import', and 'export' cannot be used outside of module code
    ,-[18:1]
 18 |  *
 19 |  * @licend The above is the entire license notice for the
 20 |  * JavaScript code in this page

Also it puts content of the file in to the terminal during the build

Try to use //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs this instead of new URL method. That helped me.

[nike1v]

I have discovered that this issue persist only in case when component with pdfjs-dist or react-pdf have "use client" directive or any parent component have this. If whole chain is server components, than it works fine. Probably I should open an issue for PDF.JS itsef, because it looks like their problem.

[nike1v]

Weird that I already provided the workerSrc at the most top page.tsx which is server component and even now my PDFViewer component throws this error when used with Turbopack. Probably this is why you suggested to set workerSrc only in client components.

[wojtekmaj]

• If you're using Turbo and see "Module not found" or "Failed to compile": Please kindly share your feedback with Next.js team and in the meantime try default Webpack mode instead.
• If you're not using Turbo and see "Module not found", ensure you don't have several copies of pdfjs-dist installed, remove node_modules and install your repo from scratch.
• If you see "'import', and 'export' cannot be used outside of module code": This has been recently fixed in feat: Pass module: "unknown" to SWC minfiier vercel/next.js#66817 and is waiting for the next release. In the meantime try setting swcMinify: false.