loading pdf using react-pdf - reactjs

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:
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,
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`;