loading pdf using react-pdf

Question

I am trying to display pdf using react-pdf in create-react-app application. I followed the instructions but the pdf is not displayed.

import { makeStyles, Box, Grid } from "@material-ui/core";
import React, { useState } from "react";
import Header from "./header";
import contractPdf from "../../sample.pdf";
import { Document, Page } from "react-pdf";

const useStyles = makeStyles((theme) => ({
  root: {
    padding: "32px 24px 14px 24px",
  },
  pdfArea: {
    borderRight: "1px solid #DDDDDD",
    height: "calc(100vh - 195px)",
  },
}));


const BasicComponent = (props) => {
  const classes = useStyles();
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

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

  return (
    <Box className={classes.root}>
      <Header />
      <Grid container>
        <Grid item xs={8}>
          <Box className={classes.pdfArea}>
            <Document
              file={contractPdf}
              onLoadSuccess={onDocumentLoadSuccess}
              options={options}
            >
              <Page pageNumber={1} />
            </Document>
          </Box>
        </Grid>
        <Grid item xs={4}>
          <Box className={classes.inputArea}>User input</Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default BasicComponent;

I checked the debug in development mode and it shows Uncaught SyntaxError: Unexpected token '<' in pdf.worker.js

Can anyone help me? I appreciate your help. Thank you

Answer 1

I wasted so much time that I decided to write an answer to this question to help anybody in my situation avoid the waste of time. The instructions as described in the github site for react-pdf do not work with react 17.02 CRA 5 and Webpack 5.6.6 regarding the pdf.worker.js worker.

As the site indicates without giving a clear solution,

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

creates a heap out of memory error during compilation that is not fixed even by allocating 8 gigabytes of memory.

Using the standard instructions doesn't work either, creating an error that is dependent of the last web directory that was used in your react-router routes. This creates a weird bug, because sometimes it works and sometimes it doesn't.

The standard instructions say:

that you should add:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

when using the .min file, instead of the regular .js file, that gave me the idea of adding the following:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

But it didn't work either. To make it work I had to do the following:

1. copy pdf.worker.js and pdf.worker.js.map from pdfjs-dist/legacy/build to public directory (it also works if you copy from the build - not legacy directory)

and,

2. add to my code the following:

   import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';

Yes, the '/' did it. Otherwise it'd go back to load my index.html from my /public directory.

Answer 2

As per documentation you have to add this line in your code.(react-pdf)

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;