SyntaxError: Unexpected token '||='

[paul-vd]

I'm running into the following issue,

I suspect I should update the alias in webpack to point to the legacy version, but this is strange encountering such issues in a brand new project, eg nextjs.

[phuocng]

@paul-vd

1. Try to upgrade NodeJS to the latest stable version
2. Point the pdfjs-dist to its legacy version.
   If you're using nextjs, then you can see the similar config here

I will add a documentation page for this and similar issues.

[paul-vd]

So issue currently comes in, if you use a setup where you can not replace paths, e.g if you use SWC from nextjs then you can't really do that because you don't have the same webpack config capabilities.

Seeing as this is a really common and recurring issue, would it not be worth implementing a prop to target different versions from pdfjs-dist instead? like add legacy to the vendors and then allow to target it via a prop in core?

[phuocng]

@paul-vd Can you create a minimum starter that uses SWC, so I can take a look?

[ivanquirino]

I'm also having this issue, same thing. I'm thinking in setting up an external webpack build to make a separate bundle and load it using an iframe.

[phuocng]

@ivanquirino Does this guide help you?

[ivanquirino]

@ivanquirino Does this guide help you?

I'm using NextJS 12, and I get this problem just by doing import { Viewer, Worker } from '@react-pdf-viewer/core';

The problem appears in this file: node_modules/pdfjs-dist/build/pdf.js

I'm goint to look how to override module paths in nextjs

[phuocng]

@ivanquirino It is strange, because the official website uses NextJS 12 (12.1.4) without using any special settings.

Its next.config.js is

module.exports = withMDX({
    // `/about` becomes `/about/index.html`
    trailingSlash: true,
    pageExtensions: ['js', 'jsx', 'tsx', 'mdx'],
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        // To work with the latest version of pdfjs-dist
        config.externals.push({
            canvas: 'canvas',
        });

        return config;
    },
});

[phuocng]

@ivanquirino This settings might be useful to you.

[ivanquirino]

I am using Next 12.0.10

@ivanquirino This settings might be useful to you.

Thanks! Does this disable the SWC compiler?

[phuocng]

I don't try SWC yet. It is great if you can create a minimum/simple project with SWC enabled, so I can take a look to see if it is compatible.

[ivanquirino]

Next uses SWC for compiling by default from version 12, so the question is if that config is going to disable it and use webpack instead.

[ivanquirino]

I'm using the module alias, but still getting the same error, in the stack trace it still points to the same file as OP's image.

[ivanquirino]

I'm using the module alias, but still getting the same error, in the stack trace it still points to the same file as OP's image.

Even though the config is in place, when react-pdf-viewer requires pdfjs-dist, it gets the default version: node_modules/pdfjs-dist/build/pdf.js

[kpotter-m2]

I'm using the module alias, but still getting the same error, in the stack trace it still points to the same file as OP's image.

Even though the config is in place, when react-pdf-viewer requires pdfjs-dist, it gets the default version: node_modules/pdfjs-dist/build/pdf.js

FWIW you're not alone, I've got a similar setup and are encountering the same issue as you even with the following config:

 webpack: function (config, env) {
            config.resolve.alias['pdfjs-dist'] = path.join(__dirname, '../node_modules/pdfjs-dist/legacy/build/pdf');
            config.externals.push({
                canvas: 'canvas',
            });

            return config;
        },

[dmudro]

Vercel / AWS Lambda have now made Node.js v16 available which in my experience provides the ultimate fix for the issue here.

I am not sure about the discussion around SWC here as my assumption was the fail was caused by using logical or assignment operator in the recent versions of pdfjs-dist package and that was not supported by Node prior v15; hence the server side issues and unexpected token issue.

[dmudro]

following up on the source of this issue, updating to latest pdfjs-dist creates more syntax error issues, this time client side in older browsers as their bundle uses private field operators not working on Safari < 14.1 for example:

mozilla/pdf.js#14912

[gelintonx]

Hi @paul-vd I solved this issue updating my NodeJS version I was using Node 14 and I found same error then I updated to Node 16 and now it's working fine.

Regards

[paul-vd]

Hi @paul-vd I solved this issue updating my NodeJS version I was using Node 14 and I found same error then I updated to Node 16 and now it's working fine.

Regards

Thanks for the info, will give it a try.

[dmudro]

regarding my earlier suggestion and some others here, you can totally get around the latest JS syntax and Node js version by simply importing the legacy version i. e. pdfjs-dist source that is backwards compatible with older js runtime envs.

it's all documented as per earlier comment:
https://react-pdf-viewer.dev/examples/how-to-solve-the-syntax-error-unexpected-token-issue/

in fact you should really take this approach as either the browser or node will always play a catch up game with latest js syntax which will always be in the non legacy pdfjs-dist bundle.