worker issue with Gatsby 4 / webpack 5

[jakoblind]

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'm using Gatsby 4 (with webpack 5) and it works fine in develop mode. However in production mode (gatsby build; gatsby serve) I get the following error in the console:

GET http://localhost:9001/[object%20Object] 404 (Not Found)

The PDF fails to render and instead I get an error message Failed to load PDF file.

Steps to reproduce

1. clone https://github.com/jakoblind/gatsby-react-pdf-bug-repro
2. npm install
3. npx gatsby build
4. npx gatsby serve
5. go to http://localhost:9000/
6. Se error as described above.

Expected behavior

To se a rendered PDF

Actual behavior

The PDF fails to render and instead I get an error message Failed to load PDF file.

Additional information

No response

Environment

• React-PDF version: 5.7.2
• React version: 17.0.1
• Webpack version (if applicable): 5

[alanpilloud]

Hi @jakoblind,

I solved the same issue by loading the worker this way:

import { pdfjs } from "react-pdf"
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`

I found these instructions here even though it is not related to webpack: https://github.com/wojtekmaj/react-pdf#standard-browserify-esbuild-and-others

It worked with gatsby serve and on Netlify.

Hope it solves your issue.

[jakoblind]

Hi @alanpilloud

Unfortunately, this solution doesn't work for me. The library must be self-hosted. I have another workable solution where I copy the pdf.worker.min.js file with CopyWebpackPlugin and use that. But it would be nice to get it to work without this "hack"

[jakoblind]

Now I have a solution to the problem and I'm sharing it here in case anyone else has the same issue:

import { Page, Document, pdfjs } from 'react-pdf/dist/esm/entry.webpack5'

if (typeof window !== 'undefined') {
  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/legacy/build/pdf.worker',
    import.meta.url
  )
}

It works when I use the path pdfjs-dist/legacy/build/pdf.worker instead of pdfjs-dist/build/pdf.worker used by entry.webpack5

[wojtekmaj]

React-PDF 5.7.2 should still use legacy PDF worker. Modern builds will be introduced in 6.0.0.

[egemenu]

@wojtekmaj Do you have any specific date for publishing v6.0.0. Or any published roadmap?

@jakoblind The solution did not worked for me. I think I still should do something with CopyWebpackPlugin. Or am I missing something?

[jakoblind]

@egemenu Try this

if (typeof window !== 'undefined' && 'Worker' in window) {
  pdfjs.GlobalWorkerOptions.workerPort = new Worker(
    new URL('pdfjs-dist/legacy/build/pdf.worker', import.meta.url)
  )
}

Does that work for you without CopyWebpackPlugin? it does for me.

[egemenu]

@jakoblind Thanks for help, this works like a charm! Actually alanpilloud's solution worked for me but this approach would make more sense in my situation.

[richcsmith]

The solution above by @jakoblind worked like a charm, thank you.

I ran into this issue today after updating all of my packages to their latest versions. I am now using create-react-app (v5, which uses webpack 5), and the legacy way of setting the workerSrc did not work for me since it changed the output directory of the compiled worker file, which my app does not have access to (which resulted in 403 errors when attempting to access the file in prod). Sharing in case it helps someone else.

[github-actions[bot]]

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]]

This issue was closed because it has been stalled for 14 days with no activity.