From 84497bb613e0b68850dd7e44ef100d6df54cd1bf Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Wed, 19 Jan 2022 20:59:33 +0100 Subject: [PATCH] Update instructions on PDF.js worker Related to #912 --- README.md | 58 ++++++++++++++++++----------------------- src/pdf.worker.entry.js | 2 +- src/shared/utils.js | 2 +- 3 files changed, 27 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 5dec5746a..697859c82 100644 --- a/README.md +++ b/README.md @@ -84,51 +84,42 @@ 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 (`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: @@ -136,7 +127,8 @@ For example, you could use a custom script like: 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'); ``` @@ -218,12 +210,12 @@ import fs from 'fs'; const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps'); function copyDir(from, to) { + // Ensure target directory exists + fs.mkdirSync(to, { recursive: true }); + const files = fs.readdirSync(from); - fs.mkdirSync(to); files.forEach((file) => { - const fromFile = path.join(from, file); - const toFile = path.join(to, file); - fs.copyFileSync(fromFile, toFile); + fs.copyFileSync(path.join(from, file), path.join(to, file)); }); } diff --git a/src/pdf.worker.entry.js b/src/pdf.worker.entry.js index d665ddea1..ccc4ec195 100644 --- a/src/pdf.worker.entry.js +++ b/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. diff --git a/src/shared/utils.js b/src/shared/utils.js index 7272adf7c..26668b8d7 100644 --- a/src/shared/utils.js +++ b/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}`, ); }