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 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>;