Create react app - how to copy pdf.worker.js file from pdfjs-dist/build to your project's output folder?

Question

Since I can't use browser's pdf viewer in the network where the app is going to be used, I am testing a react-pdf package for loading PDF's with React. I have made a component where I am sending a url of my PDF that I get from backend:

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

const PDFViewer = ({url}) => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }
 function onLoadError(error) {
   console.log(error);
 }

 function onSourceError(error) {
   console.log(error);
 }

  return (
    <div>
      <Document
        file={window.location.origin + url}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onLoadError}
        onSourceError={onSourceError}
      >
        {[...Array(numPages).keys()].map((p) => (
          <Page pageNumber={p + 1} />
        ))}
      </Document>
    </div>
  );
};

export default PDFViewer;

But, on opening the PDFViewer I get an error

Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined"

In documentation it says that you should set up service worker and that the recommended way is to do that with CDN:

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

But, I can't use CDN links for my project, and in the documentation it also says:

Create React App uses Webpack under the hood, but instructions for Webpack will not work. Standard instructions apply. Standard (Browserify and others) If you use Browserify or other bundling tools, you will have to make sure on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.

There are no instructions on how to do that with create-react-app. How can I set this up locally then?

Solution 1

Install pdfjs-dist

import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

Reference: https://github.com/mozilla/pdf.js/issues/8305

Solution 2

found a more efficient way of including the worker by including the library from the dependencies of react-pdf itself, this way you will never get a version mismatch like this The API version "2.3.45" does not match the Worker version "2.1.266"

if you install pdfjs-dist manually you will have to check react pdf dependency version on every build

import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "react-pdf/node_modules/pdfjs-dist/build/pdf.worker.entry";

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

see similar error on pdfjs library : https://github.com/mozilla/pdf.js/issues/10997

hope it helps people

Comments

[Kurosaki_Ishigo]

This answer is very similar to @lissettdm answer, what is the difference between pdfjs-dist/webpack and pdfjs-dist/build/pdf.worker.entry?

[Mordechai]

I don't know about @lissettdm's answer but I used this. I assume it's designed with webpack in mind.

[Julio Spinelli]

For react-pdf 5.7.0 none of the answers here work with CRA 5.0.0 released Dec 2021. What works is to copy the pdf.worker.js and the pde.worker.js.map to the public directory in your project from the node-modules/pdf-dist/legacy/build/pdf.worker.js and pde.worker.js.map files. as of 2-10-22. The Git repository doesn't say anything about having to copy the .map file. Probably an ommission. Filed an issue there.

[chintogtokh]

Don't forget to add a d.ts file with declare module 'pdfjs-dist/build/pdf.worker.entry'; when working with Typescript