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

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

Answer 2

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 3

You Need to downgrade the package version to

("pdfjs-dist": "2.5.207")

This works fine for me.

Answer 4

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 5

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; 
})();