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.

[nike1v]

• 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": Please kindly share your feedback on using ESM workers with Next.js team and in the meantime try setting swcMinify: false.

Thanks for your reply! I indeed stick with using regular dev mode now without turbo. The issue is addressed to next.js (turbopack) team so they can fix it.

I had some questions for you about the library, if you have time, please answer them!
Cheer!

[titouancreach]

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

Hello, it's confirmed for me too :

I can see this message using next build with react pdf 9.0.0 (8.x was working)

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
 21 |  */var e={d:(t,i)=>{for(var a in i)e.o(i,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:i[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},__webpack_exports__=globalThis.pdfjsWorker={};e.d(__webpack_exports__,{WorkerMessageHandler:()=>W

This snippet show that webpack is used (turbo pack in dev is working), Terser is used (and not swc minifier)

[wojtekmaj]

@titouancreach This has been recently fixed in vercel/next.js#66817 and the first release that includes this fix is v15.0.0-canary.53. If you can't update to this version or later, in the meantime try setting swcMinify: false.

The "from Terser" is another Next.js bug, it's NOT coming from Terser.

Here's the exact line in SWC where it's coming from :)

https://github.com/swc-project/swc/blob/ae6ab656fa0cbf2a5cde0523f8282a7eb61a7245/crates/swc_ecma_parser/src/error.rs#L416

[titouancreach]

@wojtekmaj ohhhh, thanks for clarification !

[ArnoSoontjens]

We're also seeing

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

For us, setting swcMinify: false didn't work, the error persisted (during build, not in development).
The build did start working however, when using the worker from CDN (and without swcMinify: false) , like this:

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

[Harshpandey9156]

anyone can help me in this i an facing this issue in redering the pdf and i have use react-pdf

[jamesryan-dev]

would need to see code @Harshpandey9156 - probably best to ask on Stack Overflow

[Armedips]

anyone have the same problem? ..can anyone explain?
im use pdfjs and pdf-viewer to display the pdf in frontend side

[GloriaBargoria]

I am getting the same issue. Did you get a solution the the issue?

anyone have the same problem? ..can anyone explain? im use pdfjs and pdf-viewer to display the pdf in frontend side

[lancedw]

any updates on this issue? Having similar issues where dev mode works but turbo does not.
"next": "^14.2.12",
"react-pdf": "^9.1.1",

[Bumboobee]

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.

This works for me. Thanks a lot!!