Using pdf.js in React

[ericywl]

Configuration:

• Web browser and its version: Chrome 70.0.3538.110
• Operating system and its version: OSX Mojave
• PDF.js version: 2.0.943 from NPM
• Is a browser extension: no

Steps to reproduce the problem:

1. npm install pdfjs-dist
2. Try to use pdfjs-dist in React components and fail

import pdfjsLib from 'pdfjs-dist';
...

readFunction() {
    fileReader = new FileReader();
    fileReader.onload = function() {
        let arr = new Uint8Array(this.result);
        pdfjsLib.getDocument({data: arr}).then(function(pdf) {
            console.log(pdf.numPages);
        });
    }
    fileReader.readAsArrayBuffer(file);
}
...

<input type='file' onChange={ e => this.readFunction(e.target.files[0]) } />

What is the expected behavior?
Able to read pdf.numPages?

What went wrong?

Warning: Setting up fake worker.
Uncaught SyntaxError: Unexpected token <
Uncaught (in promise) Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined". at pdf.js:8893

I'm trying to read some text from the input PDF file, but am unable to do so. Is it something to do with setting the worker? Both pdfjsLib.PDFJS and pdfjsLib.GlobalWorkerOptions are undefined.

[timvandermeij]

The global PDFJS object is removed in version 2.0, so that's expected to be undefined. Moreover, you should use loadingTask.promise.then as done in e.g., https://github.com/mozilla/pdf.js/blob/master/examples/webpack/main.js#L16. I would suggest to look at the example at https://github.com/mozilla/pdf.js/blob/master/examples/webpack/main.js since we can't do anything with code snippets alone, nor are we experts in React.