InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"

Guys, react-pdf accepts only http protocols. So, if you are testing any pdf on your machine, the browser URL will likely be “file: //home/myComputer/localOfFiles/myPdf.pdf” and the correct path should be “http://localhost:3000/myPdf.pdf”.

You don’t need to use any extension or anything else, you just move a file.pdf to your public folder in React code and try this path “http://localhost:3000/myPdf.pdf” to see if your browser will render something.

Here is some sample code:

// ...previous code
    const local = `http://localhost:3000/original.pdf`

              <Document
                  file={local}
                  // file={server}
                  onLoadSuccess={this.onDocumentLoadSuccess}
                  options={{ workerSrc: `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js` }}
                >
                  <Page pageNumber={pageNumber} width={600} />
                </Document>

// ...rest of code

Try this import file from './x.pdf';

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
import file from './x.pdf';
export default function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file={file}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}