Create-react-app - standard instructions

[StevenGoland]

Apologies if this is a noobie question, if anyone could point me to a resource to learn a bit more about this or provide an explanation that would be much appreciated!

I ran create-react-app, then installed the package, but couldn't get a pdf to load when using:
Import by adding import { Document, Page } from 'react-pdf'.

However, this worked like a charm:
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

Readme says if using create-react-app, then use "standard instruction's" which says:
If you use Browserify or other bundling tools, you will have to make sure on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.
^ What does that mean and why did importing module from entry.webpack work?

Thank you!

[wojtekmaj]

why did importing module from entry.webpack work?

Because create-react-app actually uses Webpack under the hood!

[bibschan]

I was running into the same issue @StevenGoland and your suggestion worked like a charm for me as well. I couldn't find anything in the FAQ earlier about this, so thanks for the help!

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; fixed it for me

[po5i]

I had the same issue. Standard instructions worked for me:

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

Important to mention that this line should't be present:

- import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

[wojtekmaj]

Please kindly check React-PDF v5.3.0-beta.2, in which improvements regarding loading PDF.js worker were made.

With these changes you should be able to use Webpack entry file in Create-React-App, without the need of using external CDN for hosting worker.

Let me know what you think in #748!