This is incorrect:

let Document = require('react-pdf');
let Page = require('react-pdf');

You are importing the entire module when you do this. That means that Document and Page both contain all the modules of react-pdf. Instead what you want to do is either import ReactPDF and reference those modules:

const ReactPDF = require('react-pdf');

<ReactPDF.Document />
<ReactPDF.Page />

or you could use destructuring:

import { Document, Page } from 'react-pdf';

//or

const { Document, Page } = require('react-pdf'); 

If TypeScript complains about missing declarations, just add a @types folder to your project, create a subfolder inside of it called react-pdf and file inside that folder called index.d.ts with one line:

declare module "react-pdf"

This worked for me:

• Import the package as below

  import * as pdfjsLib from "pdfjs-dist";

• Copy the pdf.worker.min.mjs file from node_modules/pdfjs-dist/build/ directory into your public folder

• Set the worker to point to the file in your public folder

  pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin + "/pdf.worker.min.mjs";

Helpful articles:

https://medium.com/@hesseclaus/using-pdfjs-with-react-app-rewired-f1f3a2527c45

https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

I faced the similar issue. There are some solutions provided in github issue e.g. Here and Here but nothing worked for me. what worked for me in create-react-app with javascript is using es5 version of the build files from pdfjs-dist which are available at pdfjs-dist/es5/build/

import * as pdfjs from 'pdfjs-dist/es5/build/pdf';
import pdfjsWorker from 'pdfjs-dist/es5/build/pdf.worker.entry';

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

I'm not sure about typescript but should work the same.

versions:

"pdfjs-dist": "^2.7.570",
"react": "^17.0.1",