React pdf js - Warning: Setting up fake worker

Question

I am using a react pdf viewer and I would like to set up worker locally. I have tried doing that like this:

import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

<Worker workerUrl={pdfjsWorker}>
    <Viewer
      fileUrl={url}
      defaultScale={SpecialZoomLevel.PageFit}
      plugins={[
        defaultLayoutPluginInstance
      ]}
    />
  </Worker>

But, that throws a warning:

Warning: Setting up fake worker

What is the correct way of import a worker then, why do I get this warning?

Answer 1

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.0.279/pdf.worker.min.js'

Add this after you import pdfjs-dist and try matching the version(here 3.0.279) as per the console error. It worked for me.

Edit: As the pdfjs-dist version changed, i get errors again. So instead of of hardcoding the version, i started using dynamic version which pdfjs-dist exports.

So the updated code looks like:

import * as pdfjsLib from 'pdfjs-dist/build/pdf'

pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

Answer 2

I was facing similar issues resolved them by adding the pdf.worker.js

Git Refrence

I added the js file in the head for the worker.js i.e https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.js

Then I correct the version (2.10.377 to 2.3.200) as per the console error and it starts loading the pdf