React app throwing errors when using 'react-pdf'

Question

I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.

One work around that seemed to solve the issue (temporarily) was to copy the pdf.worker.js file from the node-modules/build/pdfjs-dist/build folder and place it in the public folder of my react app. Then in my index.js file put the following code:

  import  {pdfjs}  from 'react-pdf' 
window.PDFJS.workerSrc  = process.env.PUBLIC_URL + '/pdf.worker.js'

This worked just fine for a week, until I installed a new module into my application with npm. Now, I'm getting the same error I did in the beginning, and nothing has changed:

index.js:14 Uncaught TypeError: Cannot set property 'workerSrc' of undefined

These were the initial comments that helped me narrow down the error: https://github.com/facebook/create-react-app/issues/1574#issuecomment-280436498

https://github.com/wojtekmaj/react-pdf/issues/291

but now that it's back I'm kind of at a loss for ideas. Has anyone else experienced this and been able to solve it? Any help would be greatly appreciated!

Tom King · Accepted Answer · 2018-12-10 05:35:29Z

1

Based on what I have seen in the docs and in forums, it appears you should be altering the global PDFJS object.

PDFJS.workerSrc, instead of window.workerSrc.

answered Dec 10, 2018 at 5:35

Tom King

1044 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cle_joe Over a year ago

Hey Tom thanks for the response! I tried what you mentioned and still get the same error:TypeError: Cannot set property 'workerSrc' of undefined

cle_joe Over a year ago

Youre comment did make me realize I pasted the line from my code incorrectly though! What was PREVIOUSLY working was : window.PDFJS.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.js'

jiwopene · Accepted Answer · 2020-06-09 18:33:43Z

1

I managed to get this working by loading the worker from CDN.

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

pdfjs.GlobalWorkerOptions.workerSrc=//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js

edited Jun 9, 2020 at 18:33

jiwopene

3,76720 silver badges33 bronze badges

answered Jun 9, 2020 at 12:52

Maksym Koshyk

5735 silver badges9 bronze badges

Collectives™ on Stack Overflow

React app throwing errors when using 'react-pdf'

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related