[4.1] - Webpack PDF.js worker fails to load public application url

[FrederickEngelhardt]

Description

When following the documentation on how to enable the PDF.js worker for performance I enabled the import { Document } from 'react-pdf/dist/entry.webpack'; for webpack

The worker will fail to load returning a GET /node/pdf.worker.js 404 (Not Found) when loading a url from our public asset section. Also tried this with a simple file hosting server with a ngrok url to connect things. Same result.

Adding the external CDN fix resolved the issue.

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Steps to reproduce

1. Follow the enable PDF.js worker section import { Document } from 'react-pdf/dist/entry.webpack';
2. Use a locally hosted file url with a relative/absolute path to a public folder pdf document
3. Notice that the pdf.worker.js returns a GET 404 error for the worker file

Expected behavior

When using the following code according to documentation, I expected to be able to import the react-pdf/dist/entry.webpack and have the pdf worker loaded.

Additional information

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: Chrome 80.0.3987.122 (Official Build) (64-bit)
• React-PDF version: 4.1.0
• React version [e.g. 16.3.0]: 16.12.0
• Webpack version (if applicable) [e.g. 4.16.2]: 4.41.6

[kylemellander]

I also experienced this problem when attempting to upgrade to webpack 4.42.1. I am unsure whether it is related, but I am also receiving the following message during the build:

WARNING in ./node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js 10390:12-19
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[laclance]

same here

[Pyrolistical]

I think its caused by webpack-contrib/worker-loader#96

[wojtekmaj]

Please kindly check React-PDF v5.3.0-beta.2, in which improvements regarding loading PDF.js worker were made.

These changes should result in 10-15 seconds faster Webpack builds, as well as you should be able to use Webpack entry file in Create-React-App, without the need of using external CDN for hosting worker.

Let me know what you think in #748!