worker issue with Gatsby 4 / webpack 5

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

[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.

[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.