PDFjs-dist error - Githubissues

nike1v commented 1 month ago

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
[X] 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 commented 1 month ago

What do you set workerSrc to?

nike1v commented 1 month ago

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 commented 1 month ago

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

nike1v commented 1 month ago

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 commented 1 month ago

+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 commented 1 month ago

+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 commented 1 month ago

+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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 3 weeks ago

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 https://github.com/vercel/next.js/pull/66817 and is waiting for the next release. In the meantime try setting swcMinify: false.

nike1v commented 3 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

@titouancreach This has been recently fixed in https://github.com/vercel/next.js/pull/66817 and is waiting for the next release. 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 commented 2 weeks ago

@wojtekmaj ohhhh, thanks for clarification !

wojtekmaj / react-pdf

PDFjs-dist error #1822

Before you start - checklist

Description

Steps to reproduce

Expected behavior

Actual behavior

Additional information

Environment