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

[cmr624]

Am having this same issue! PDFs not loading

[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!

[erick-umc]

Hi,

For anyone using react-rails and running into this problem. Check out this thread as well:

#659 (comment)

I copied the worker.js to my components directory and fixed the webpacker errors as described of the link above. After that, the library is working well.

[kudakwashe-pro]

• Mine works with no error only u should make sure u are using the correct pdf-worker-min.js for the version of your react-pdf

• Please not that in

   import * as PDFworker from 'assets/pdf-worker-min.js';

  'assets/pdf-worker-min.js' // path to where file is stored 
                           // so u may change the path according to where you store your file

• Use this code as your guide line

import React from 'react';
import PropTypes from 'prop-types';
// react pdf viewer
import { PdfJs, Viewer, Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import { GlobalWorkerOptions } from 'pdfjs-dist';
import * as PDFworker from 'assets/pdf-worker-min.js'; // import from path to where file is stored 
// Custom PDF viewer component
const PDFViewer = ({ pdfUrl }) => {
    // Create new plugin instance
    const defaultLayoutPluginInstance = defaultLayoutPlugin();
    GlobalWorkerOptions.workerSrc = PDFworker

    // Render the PDF viewer component
    return (
        <div style={{ height: '750px' }}>
            {pdfUrl ? (
                // Render the PDF viewer with the custom plugin instance "https://unpkg.com/[email protected]/build/pdf.worker.min.js"
                <Worker>
                    <Viewer fileUrl={pdfUrl} plugins={[defaultLayoutPluginInstance]} />
                </Worker>
            ) : (
                <div>No PDF file selected</div>
            )}
        </div>
    );
};
PDFViewer.propTypes ={
    pdfUrl: PropTypes.string.isRequired,
}

export default PDFViewer;

• Any error l can help on this