import React, { useState } from 'react';
import ReactDOM from "react-dom";
import HTMLFlipBook from "react-pageflip";
import { pdfjs, Document, Page as ReactPdfPage } from "react-pdf";
import pdfFile from "../public/Issue.pdf"


pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const Pages = ({ number, children }) => (
  <div className="demoPage">
    {children}
    <p>Page number: {number}</p>
  </div>
);

function Flipbook() {
  const [numPages, setNumPages] = useState(null);
  const [error, setError] = useState(null);

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

  const onError = (error) => {
    setError(`Error rendering PDF page: ${error.message}`);
  };

  return (
    <div className="h-screen w-screen flex flex-col gap-5 justify-center items-center bg-gray-900 overflow-hidden">
      <h1 className="text-3xl text-white text-center font-bold">FlipBook</h1>
      {error ? (
        <p className="text-red-500">{error}</p>
      ) : (
        <HTMLFlipBook width={400} height={570}>
          <Document file={pdfFile} onLoadSuccess={onDocumentLoadSuccess} onLoadError={onError}>
            {Array.from(new Array(numPages), (el, index) => (
              <div key={index}>
                <Page pageNumber={index + 1} width={400} />
              </div>
            ))}
          </Document>
        </HTMLFlipBook>
      )}
    </div>
  );
}

export default Flipbook;

I receive this error: ./public/Issue.pdf
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)