2019 Recommended way to use pdf.worker.js with create-react-app

[itamarzil12345]

I've had problems that many had regarding using pdf.worker.js inside my react application (I build a wrapper on pdf.js for react).
I'm using Create React App, I tried many things from hosting from cloud:
PdfJsLib.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_CLOUD_URL;
this works but I must make it work locally.
trying to use a local path does not work.
I read many issues and posts of stackoverflow, as well as did research but could not come with the right solution.
so my question is in 2019 - what is the recommended way to use pdf.js worker inside create-react-app

[timvandermeij]

I don't think anybody here is a React developer, so we can't help out with that, especially without a running example. There is a working example in https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.js#L25, so if that doesn't work for you then it's most likely something in create-react-app.

It looks like wojtekmaj/react-pdf#291 is a similar problem.

[tetrau]

I have found a workaround for this problem.

First, copy the pdf.worker.min.js to src/ folder and changed the
filename extension to something else than .js, like .data or .txt

cd src/
cp ../node_modules/pdfjs-dist/build/pdf.worker.min.js pdf.worker.min.data

Then, in your javascript files, set the workerSrc like this.

import workerURL from "./pdf.worker.min.data";

pdfjsLib.GlobalWorkerOptions.workerSrc = workerURL;

This will trick the create-react-app to think pdf.worker.min.js as a data file and
put the file in /build/static/media, so pdf.worker.min.js will be cached by the
default service worker configuration.

This way is simple and work with vanilla create-react-app without eject and
is compatible with the default service worker, you can check this file in my
project for an example.

Check the comment down below for a better, updated version of this hack.

[dpetrov]

Thanks for sharing @tetrau , worked like a charm.

[ubmarco]

Thanks for the idea @tetrau.
When running yarn start I get this error on the Firefox console:

Loading Worker from “http://localhost:3000/static/media/pdf.worker.min.a444854a.data” was blocked because of a disallowed MIME type (“”).
Warning: Setting up fake worker.

I guess the Node server in create-react-app does not know the mime type of .data files? Any clues how to fix this?

[tetrau]

@ubmarco I believe this problem is not caused by the node server or any server. It seems that Firefox blocks worker script requests with incorrect MIME i.e. non-javascript MIME.

I have come up a new approach to solve this problem:

1. convert the pdf.worker.min.js content to a json, you can use the following command as an example.

cd src/
node -e "const fs = require('fs'); fs.writeFileSync('pdf.worker.min.json', JSON.stringify(fs.readFileSync('../node_modules/pdfjs-dist/build/pdf.worker.min.js', 'utf-8')))"

2. import the pdf.worker.min.json content, which is a string, then build a blob on it, supply the blob object url to workerSrc.

import workerContent from "./pdf.worker.min.json";

var workerBlob = new Blob([workerContent],{type : 'text/javascript'});
var workerBlobURL = URL.createObjectURL(workerBlob);
pdfjsLib.GlobalWorkerOptions.workerSrc = workerBlobURL;

[eduwass]

@ubmarco I believe this problem is not caused by the node server or any server. It seems that Firefox blocks worker script requests with incorrect MIME i.e. non-javascript MIME.

I have come up a new approach to solve this problem:

1. convert the pdf.worker.min.js content to a json, you can use the following command as an example.

cd src/
node -e "const fs = require('fs'); fs.writeFileSync('pdf.worker.min.json', JSON.stringify(fs.readFileSync('../node_modules/pdfjs-dist/build/pdf.worker.min.js', 'utf-8')))"

2. import the pdf.worker.min.json content, which is a string, then build a blob on it, supply the blob object url to workerSrc.

import workerContent from "./pdf.worker.min.json";

var workerBlob = new Blob([workerContent],{type : 'text/javascript'});
var workerBlobURL = URL.createObjectURL(workerBlob);
pdfjsLib.GlobalWorkerOptions.workerSrc = workerBlobURL;

😆 wow having to do these gymnastics makes no sense, but thanks you just saved my day 👏