How to solve the 'SyntaxError: Unexpected token' issue

The recents version of `pdfjs-dist` use some modern JavaScript features. It might cause the issue where your environment doesn't support these syntax.

Here are some of them:

`Support for the experimental syntax 'classPrivateProperties' isn't currently enabled`
`SyntaxError: Unexpected token '||='`
`Uncaught SyntaxError: expected expression, got '='`

Fortunately, `pdfjs-dist` also provides a legacy version that works with the old browsers and old bunders (such as Webpack 4). The path to the legacy build varies depending on the `pdfjs-dist` versions:

`pdfjs-dist` version	Legacy build path
2.7.570	`node_modules/pdfjs-dist/es5/build/pdf`
2.8.335 and later	`node_modules/pdfjs-dist/legacy/build/pdf`

To resolve the issue, we can replace the main entry point of `pdfjs-dist` with its legacy path.

Update the Worker path

import { Worker } from '@react-pdf-viewer/core';

{/* For pdfjs-dist 2.7.570 */}
<Worker workerUrl='https://unpkg.com/pdfjs-dist@2.7.570/es5/build/pdf.worker.js'>

{/* For pdfjs-dist 2.8.335 and later. You need to replace 2.8.335 with the version you are using */}
<Worker workerUrl='https://unpkg.com/pdfjs-dist@2.8.335/legacy/build/pdf.worker.js'>

Use the legacy path

Depending on the bunders and starter kits, the settings might be different. Following is a few configurations for popular starters.

Create React App v4

Install the `react-app-rewired` package

npm install --save-dev react-app-rewired

Set the path to `pdfjs-dist` in `config-overrides.js`:

// config-overrides.js
module.exports = {
    webpack: function (config, env) {
        config.resolve.alias['pdfjs-dist'] = path.join(__dirname, './node_modules/pdfjs-dist/legacy/build/pdf');
        return config;
    },
};

For more information, please visit the React PDF Viewer starter for Create React App v4.

Webpack 4

Set `pdfjs-dist` in the `alias` key:

// webpack.config.js
const path = require('path');

module.exports = {
    entry: '...',
    output: {
        ...
    },
    module: {
        ...
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: {
            // Point to legacy build

            // For pdfjs-dist 2.7.570
            // 'pdfjs-dist': path.resolve('./node_modules/pdfjs-dist/es5/build/pdf.js'),

            // For pdfjs-dist 2.8.335 and later
            'pdfjs-dist': path.resolve('./node_modules/pdfjs-dist/legacy/build/pdf.js'),
        },
    },
};