Javascript - React PDF Display issue with Bundle.js Uncaught SyntaxError: Unexpected token '<' and url not loading

YoshiW
July 31, 2023
110 views
0 votes
2 Answers

I am trying to display a pdf on my web page using the react-pdf library, however whenever I try to load the page I get the following error:

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

And I don’t really know what this means and all of my other pages work other then this one, here is my code if anyone can help:

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

const ResumeDisplay = () => {
  return (
    <div>
      <Document
        file={
          "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
        }
      >
        <Page pageNumber={1} />
      </Document>
    </div>
  );
};

export default ResumeDisplay;

Answers

Chosen as BEST ANSWER

FIX: I imported pdfjs and needed to use useEffect for the url as React thought it was rendering multiple times:

import React, { useState, useEffect } from "react";
import { Document, Page } from "react-pdf";
import { pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

const ResumeDisplay = () => {
  const [numPages, setNumPages] = useState(1);
  const [pageNumber, setPageNumber] = useState(1);
  const [file, setFile] = useState(null);

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

  const onFileChange = (url) => {
    setFile(url);
  };

  useEffect(() => {
    onFileChange(
      "https://mypdf.pdf"
    );
  }, []);

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

export default ResumeDisplay;