Skip to content

Commit

Permalink
Update instructions on PDF.js worker
Browse files Browse the repository at this point in the history
Related to #912
  • Loading branch information
wojtekmaj committed Jan 19, 2022
1 parent b108555 commit 1077ec5
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 30 deletions.
48 changes: 20 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,57 +86,49 @@ Check the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/main/sa

### Enable 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 (`react-scripts@4.0.0`) uses Webpack 4 under the hood, so you can use the entry file built for Webpack 4.

Create React App 5 (`react-scripts@5.0.0`) 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');
```
Expand Down
2 changes: 1 addition & 1 deletion src/pdf.worker.entry.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/shared/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
);
}

Expand Down

0 comments on commit 1077ec5

Please sign in to comment.