Uncaught SyntaxError: Unexpected token '<'

[schvenk]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I have been unable to get react-pdf working, even in a very simple sample app. (The sample app in the repo also doesn't work for me, though that's a different error.) Here's what I've tried.

1. npx create-react-app pdftest
2. Add a sample.pdf file inside pdftest/public. I've tried two of my own PDFs as well as the sample PDF from the repo.
3. In App.js, remove all boilerplate code inside the outermost <div> and replace with <Document file="./sample.pdf" />
4. yarn start
5. Compiles and runs fine, but...
6. In the browser I see:

Uncaught runtime errors:

ERROR
Uncaught SyntaxError: Unexpected token '<'
    at handleError (http://localhost:3000/static/js/bundle.js:57404:58)
    at http://localhost:3000/static/js/bundle.js:57423:7

ERROR
Unexpected token '<'
SyntaxError: Unexpected token '<'

Any idea what's going on?

Steps to reproduce

See above.

Expected behavior

PDF renders.

Actual behavior

Error as described above.

Additional information

No response

Environment

• Browser (if applicable): Chrome 114.0.5735.198 Mac
• React-PDF version: 7.1.2
• React version: 18.2.0
• Webpack version (if applicable): react-scripts 5.0.1

[Sharoof-Khan]

Same Issue

[CRamos132]

I had the same issue, then after reading the rest of the README i came across this section then after adding this to my code it worked.

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

[wojtekmaj]

Duplicate of #994 Duplicate of #991 Duplicate of #680 Duplicate of #52

[zsz-danzi]

I have the same Issue.(Uncaught SyntaxError: Unexpected token '<' (at vendors-node_modules_pnpm_react-pdf_7_3_0_zula6vjvt3wdocc4mwcxqa6nzi_node_modules_react-pdf_d-e61ade.chunk.worker.js:1:)

now is resolve

import { Document, Page, pdfjs } from "react-pdf"; pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;