Compile and set the worker source with Webpack

As mentioned in the Setting up the worker section, the worker version has to be the same as the version of the `pdfjs-dist` package. Otherwise, you you will see the error message like this:
The API version "2.6.347" does not match the Worker version "2.1.266"
Where `2.6.347` is the version of `pdfjs-dist` that you can see in the `package.json` file:
{
"dependencies": {
"pdfjs-dist": "^2.6.347",
...
}
}
And `2.1.266` is the version of Worker which is passed to the `Worker` component as
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.1.266/build/pdf.worker.min.js">...</Worker>
It isn't convenient and error prone when you upgrade `pdfjs-dist` but forget to set the same version for the worker.
This post demonstrates a simple way that uses the Webpack bundler to compile and set up the worker source based on the current installed `pdfjs-dist` package.

Install worker-loader

npm install --save-dev worker-loader

Set the pdfjs-dist path

Ask Webpack to load `pdfjs-dist/webpack` when it sees `pdfjs-dist` import. Change your Webpack configuration as following:
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.NormalModuleReplacementPlugin(
/^pdfjs-dist$/,
resource => {
resource.request = path.join(__dirname, './node_modules/pdfjs-dist/webpack');
},
),
...
],
};

Build pdfjs worker

// webpack.config.js
const path = require('path');
module.exports = {
entry: {
main: './src/index.tsx',
'pdf.worker': path.join(__dirname, './node_modules/pdfjs-dist/build/pdf.worker.js'),
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
...
};
Webpack will build a worker named `pdf.worker.bundle.worker.js` located in the `dist` directory.

Set the worker source

Finally, you can set the worker source to the file compiled in the previous section:
import { Worker } from '@react-pdf-viewer/core';
<Worker workerUrl="/pdf.worker.bundle.worker.js">...</Worker>;

See also