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