Update instructions on PDF.js worker

Related to #912

README.md

@@ -84,59 +84,51 @@ function MyApp() {
 
 Check the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-pdf/wiki/Recipes) in [React-PDF Wiki](https://github.com/wojtekmaj/react-pdf/wiki/).
 
-### Enable PDF.js worker
+### Configure PDF.js worker
 
-It is crucial for performance to use PDF.js worker whenever possible. This ensures that PDF files will be rendered in a separate thread without affecting page performance. To make things a little easier, we've prepared several entry points you can use.
+For React-PDF to work, PDF.js worker needs to be provided.
 
-#### Webpack ≤4
+To make it easier, special entry files were prepared for most popular bundlers. You can find them in the table below.
 
-Instead of directly importing modules you need from `'react-pdf'`, import them like so:
+For example, if you want to use React-PDF with Webpack 5, instead of writing:
 
 ```js
-import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
-```
-
-#### Webpack 5
-
-Instead of directly importing modules you need from `'react-pdf'`, import them like so:
-
-```js
-import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5';
+import { Document, Page } from 'react-pdf';
 ```
 
-#### Parcel 1
-
-Instead of directly importing modules you need from `'react-pdf'`, import them like so:
+write:
 
 ```js
-import { Document, Page } from 'react-pdf/dist/esm/entry.parcel';
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 ```
 
-#### Parcel 2
-
-Instead of directly importing modules you need from `'react-pdf'`, import them like so:
-
-```js
-import { Document, Page } from 'react-pdf/dist/esm/entry.parcel2';
-```
+| Bundler   | Entry file |
+| --------- | ---------- |
+| Parcel 1  | `react-pdf/dist/esm/entry.parcel`
+| Parcel 2  | `react-pdf/dist/esm/entry.parcel2`
+| Webpack 4 | `react-pdf/dist/esm/entry.webpack`
+| Webpack 5 | `react-pdf/dist/esm/entry.webpack5`
 
 #### Create React App
 
-Create React App uses Webpack under the hood, so you can follow [Webpack ≤4 instructions](#webpack--4).
+Create React App 4 (`[email protected]`) uses Webpack 4 under the hood, so you can use the entry file built for Webpack 4.
+
+Create React App 5 (`[email protected]`) uses Webpack 5 under the hood, so the aim is to use the entry file built for Webpack 5. However, the way Webpack is configured in CRA 5 causes it to crash at build time on most machines with _JavaScript heap out of memory_ error.
 
-[Standard instructions](#standard-browserify-and-others) will also work. In Create React App, you can copy `pdf.worker.js` file from `pdfjs-dist/build` to `public` directory in order for it to be copied to your project's output folder at build time.
+[Standard instructions](#standard-browserify-esbuild-and-others) will also work with Create React App. Please note that in CRA, you can copy `pdf.worker.js` file from `pdfjs-dist/legacy/build` to `public` directory in order for it to be copied to your project's output folder at build time.
 
-#### Standard (Browserify and others)
+#### Standard (Browserify, esbuild and others)
 
-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.
+If you use Browserify, esbuild, or other bundlers, you will have to make sure on your own that `pdf.worker.js` file from `pdfjs-dist/legacy/build` is copied to your project's output folder.
 
 For example, you could use a custom script like:
 
 ```js
 import path from 'path';
 import fs from 'fs';
 
-const pdfWorkerPath = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'build', 'pdf.worker.js');
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const pdfWorkerPath = path.join(pdfjsDistPath, 'legacy', 'build', 'pdf.worker.js');
 
 fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.js');
 ```

src/pdf.worker.entry.js

@@ -1,5 +1,5 @@
 /**
- * PDF.js Worker entry file.
+ * PDF.js worker entry file.
  *
  * This file is identical to Mozilla's pdf.worker.entry.js, with one exception being placed inside
  * this bundle, not theirs.

src/shared/utils.js

@@ -107,7 +107,7 @@ export function displayCORSWarning() {
 export function displayWorkerWarning() {
   warning(
     !isLocalFileSystem,
-    `Loading PDF.js Worker may not work on protocols other than HTTP/HTTPS. ${allowFileAccessFromFilesTip}`,
+    `Loading PDF.js worker may not work on protocols other than HTTP/HTTPS. ${allowFileAccessFromFilesTip}`,
   );
 }