create-react-app setup yields `Uncaught TypeError: Cannot read property 'GlobalWorkerOptions' of undefined`

[donatoaz]

Before you start - checklist

• I have read documentation in README
• I have checked sample and test suites to see real life basic implementation
• I have checked if this question is not already asked

What are you trying to achieve? Please describe.

I would like to setup the pdf worker on an un-ejected create-react-app application

Describe solutions you've tried

First I tried using the instructions on Browserify and Others. This would give me the error in the title: Uncaught TypeError: Cannot read property 'GlobalWorkerOptions' of undefined.

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

Then I tried importing pdfjs directly from pdfjs-dist, which got me: Uncaught TypeError: Cannot set property 'workerSrc' of undefined

import pdfjs from 'pdfjs-dist'
pdfjs.GlobalWorkerOptions.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.js'

Since both these options did not work, I tried following this comment, as such I got no errors, but the warnings below:

window.PDFJS.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.305/pdf.worker.js'

warning:

./node_modules/pdfjs-dist/lib/display/api.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

And as a matter of fact I don't even know if it worked (how can I check if there is a worker running?)

Environment

• Browser : Chrome Version 70.0.3538.67
• React-PDF version 3.0.5
• React version 16.5.2
• Webpack version 4.19.1
• CRA version 1.5.2

Thanks for any tips and pointers!

[wojtekmaj]

From what I see you're using React-PDF 3.0.5. 4.0 which is on master branch will be out next week. Please see this :) --> https://github.com/wojtekmaj/react-pdf#before-you-continue

TL;DR Use React-PDF 4.0 beta or use instructions for 3.x (not recommended)

[Puspendert]

I am using 4.0.0-beta.5
But I am getting InvalidPDFException for this file
InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"

My Component:

import React from "react"
import { Document, pdfjs } from "react-pdf"
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${ pdfjs.version }/pdf.worker.js`

class Sample extends React.Component {
  render(){
     return(
        <div>
          <Document file="/Users/laptop/Desktop/sample.pdf" />
        </div>
     )
  }
}

Also, there are lot of warning on console

[jmz7v]

Hi @wojtekmaj
I think I'm hitting the same issue, also with create-react-app

Versions

"react-pdf": "4.0.0",
"react": "^16.4.1",
"react-scripts": "2.0.3",

My component imports react-pdf as follows:

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

And my browser returns

TypeError: Cannot read property 'GlobalWorkerOptions' of undefined

on the following line

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

I'm console logging pdfjs and it returns undefined.

Is there any chance the pdfjs export is not working?

[avrame]

Any update on this issue? I'm having the same problem as @jmz7v

[evanzombie]

I am also getting this warning:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

I'm using "react-pdf": "^4.0.5", and "react": "^16.8.6".
Used the pdf.worker.js file from cdn as shown below:

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

[cmr624]

Am having this same issue! PDFs not loading

[linxianxi]

I am also getting this warning:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

I'm using "react-pdf": "^4.0.5", and "react": "^16.8.6".
Used the pdf.worker.js file from cdn as shown below:

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

How did you solve it?

[wojtekmaj]

This is unrelated to this thread. see #280 for discussion on "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted".

[wojtekmaj]

Please kindly check React-PDF v5.3.0-beta.2, in which improvements regarding loading PDF.js worker were made.

With these changes you should be able to use Webpack entry file in Create-React-App, without the need of using external CDN for hosting worker.

Let me know what you think in #748!