Docs
Plugins
Localizations
Examples
Updates
Purchase

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