error in displaying pdf in react-pdf

Question

I am new new to react, I am trying to display a pdf file on browser. I am getting an error as failed to load PDF. I am trying to run the sample program given in https://www.npmjs.com/package/react-pdf.

App.js

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

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="./1.pdf"
          onLoadSuccess={this.onDocumentLoad}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      </div>
    );
  }
}

export default MyApp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Error screenshot

Answer 1

You load the file using file="./1.pdf" I believe that might be the problem.

If you have a file structure like:

• src
  • App.js
  • components
    • ShowPdfComponent.js
    • 1.pdf
• public
  • bundle.js

Then you need to move the 1.pdf to public folder like this:

• src
  • App.js
  • components
    • ShowPdfComponent.js
• public
  • bundle.js
  • 1.pdf

Because when your compiled javascript code is being executed from public/bundle.js and bundle.js does not know how to get to src/components/1.pdf in file system.

There might be also a difference between production/development environment if you are using webpack and webpack-dev-server.

Look at react-pdf example. It has flat file structure. That is the reason why it works.

Answer 2

if you are using create-react-app then you need to import differently like

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'

because it uses webpack under the hood.