Cannot load PDF in React-PDF

Question

I am new to React and I am trying to load a PDF from my src/assets folder, following the example from here I have the following code:

import React from 'react';
import { Document, Page } from 'react-pdf';
  
import samplePDF from './assets/plan.pdf';

export default function MyDocument() {
  return (
    <Document file={samplePDF}>
      <Page pageNumber={1} />
    </Document>
  );
}

I believe this should just work and render page 1/1 in my app. I get the following error though:

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

In the console this error points to here: of my index.html

Things I have tried:

1. multiple PDF's - the same issue with each
2. changing location of PDF's - same issue
3. using the following code:

export default function MyDocument() {
  const [numPages, setNumPages] = useState(null);
  const [pdfFile, setPdfFile] = useState(null);

  useEffect(() => {
    fetch('./assets/plan.pdf')
      .then(response => response.blob())
      .then(blob => {
        setPdfFile(URL.createObjectURL(blob));
        pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
      })
      .catch(error => {
        console.error('Error loading PDF file:', error);
      });
  }, []);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  return (
    <div>
      {pdfFile && (
        <Document file={pdfFile} onLoadSuccess={onDocumentLoadSuccess}>
          {Array.from(new Array(numPages), (el, index) => (
            <Page key={`page_${index + 1}`} pageNumber={index + 1} />
          ))}
        </Document>
      )}
    </div>
  );
}

This worked in that it removed the error but just left me with my webpage reading: Failed to load PDF file. without any further error codes

4. using this method, my network tab suggests the PDF loaded with a 200 HTTP status code

5. uninstalling and reinstalling my react-pdf files

File structure: