Additional loader for pdfjs-dist in react app?

Question

I have the pdfjs-dist dependency in my react app and it isn't working - I'm not sure what I changed to cause this. I'm running node v14.16.1 , npm v7.9.0 , react 17.0.2 , react-scripts 4.0.3 , and pdfjs-dist 2.7.570 . I'm getting the following error message when I run npm start :

Failed to compile.

./node_modules/pdfjs-dist/build/pdf.js 2407:53
Module parse failed: Unexpected token (2407:53)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                 intent: renderingIntent,
|                 renderInteractiveForms: renderInteractiveForms === true,
>                 annotationStorage: annotationStorage?.getAll() || null
|               });
|             }

I've tried uninstalling and reinstalling relevant packages, as well as npm update , npm audit , and so forth. I also tried adding the worker-loader npm package but it's already a peer dependency on pdfjs-dist so it made no difference. My partner on this project has the same repo and he has no issues, so I'm sure it's something on my end. I believe it has to do with support for optional chaining, but not sure how to proceed. Thanks!

Answer 1

I just stumbled upon the same issue. What I did was to revert pdfjs-dist to an earlier version (2.9.359 back to 2.6.347 in my case). It all works fine now, hope it helps someone.

A possible explanation from a similar case could be found in this other question .

Answer 2

Most likely you have incorrect version of webpack. Try to use es5 build https://github.com/mozilla/pdf.js/issues/12905

Answer 3

try to include the package in babel-loader rule

  {
    test: /\.[tj]sx?$/i,
    include: [
      /\/node_modules\/pdfjs-dist/,`enter code here`
      /\/src/,
    ],
    loader: 'babel-loader',`enter code here`
    options: {},
  },

Answer 4

This helped me,

You need to import this lib asynchronously

let pdfjs;

(async function () { 
 pdfjs = await import("pdfjs-dist/build/pdf"); 
 const pdfjsWorker = await import("pdfjs-dist/build/pdf.worker.entry");
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; 
})();

Answer 5

You Need to downgrade the package version to

("pdfjs-dist": "2.5.207")

This works fine for me.