Pdfjs Not working with react js

[muhammad-asad-26]

Hi I'm trying to use pdfjs-dist in react app but its not working. I'm getting following error: Uncaught SyntaxError: Unexpected token < Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined". at pdf.js:10999

Configuration:

• Web browser and its version: Chrome (Latest)
• Operating system and its version: Ubuntu 18.10
• PDFJS version: pdfjs-dist v2.0.943

Steps to reproduce the problem:

1. Create react app
2. npm install pdfjs-dist
3. Import it and use it in any react component

My Code:

• /Helper/Page.js

  
  import React, { Component } from "react";

class Page extends Component { state = { status: "N/A", page: null, width: 0, height: 0 };

shouldComponentUpdate(nextProps, nextState) { return ( this.props.pdf !== nextProps.pdf || this.state.status !== nextState.status ); }

componentDidUpdate(nextProps) { this._update(nextProps.pdf); }

componentDidMount() { const { pdf } = this.props; this._update(pdf); }

setCanvasRef = canvas => { this.canvas = canvas; };

_update = pdf => { if (pdf) { this._loadPage(pdf); } else { this.setState({ status: "loading" }); } };

_loadPage(pdf) { if (this.state.status === "rendering" || this.state.page !== null) return;

pdf.getPage(this.props.index).then(page => {
  this.setState({ status: "rendering" });
  this._renderPage(page);
});

}

_renderPage(page) { let { scale } = this.props; let viewport = page.getViewport(scale); let { width, height } = viewport; let canvas = this.canvas; let context = canvas.getContext("2d"); canvas.width = width; canvas.height = height;

page.render({
  canvasContext: context,
  viewport
});

this.setState({ status: "rendered", page, width, height });

}

render() { let { width, height, status } = this.state;

return (
  <div className={`pdf-page ${status}`} style={{ width, height }}>
    <canvas ref={this.setCanvasRef} />
  </div>
);

} }

export { Page };

- /Helper/Viewer.js

import React from "react"; import { Page } from "./Page";

const Viewer = ({ pdf, ...props }) => { const numPages = pdf ? pdf._pdfInfo.numPages : 0;

if (pdf) { return (

{Array.apply(null, { length: numPages }).map((v, i) => ( ))}

);

}

return null; };

export { Viewer };

- Index.js

import React, { Component } from "react"; import * as PdfJs from "pdfjs-dist"; import { Viewer } from "./Helper/Viewer"; import "./index.css";

class PDFViewer extends Component { state = { pdf: null, scale: 1.2 };

componentDidMount() { PdfJs.getDocument(this.props.url) .then(pdf => { this.setState({ pdf }); }) .catch(error => { console.log(error); }); }

render() { const { pdf, scale } = this.state; return (

);

} }

export { PDFViewer };

[Snuffleupagus]

As clearly stated in https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md, code-snippets are not useful and a complete and runnable example needs to be provided; as-is the issue is incomplete.

[timvandermeij]

Closing until the required information is provided.