What could be the root of this next.js build issue occurring on the Vercel platform?

I recently upgraded my next.js project to version 12.0.7, along with Typescript (4.5.4) and pdfjs-dist (2.11.228), among other libraries. Locally, everything runs smoothly with the commands yarn dev for development and yarn build for building.

However, after committing and pushing to GitHub, I encountered a build error on the Vercel website:

Build error occurred
/vercel/path0/node_modules/pdfjs-dist/build/pdf.js:2358
    return this._jsActionsPromise ||= this._transport.getPageJSActions(this._pageIndex);
                                  ^^^
SyntaxError: Unexpected token '||='
...

This SyntaxError is surprising as the syntax should be valid according to my understanding.

My tsconfig.json configuration looks like this:

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  "include": [
    ...
  ],
  "exclude": [
    "node_modules"
  ]
}

If anyone has any insights or solutions, it would be greatly appreciated. Thank you!

typescriptnext.jsvercelpdf.js

Answer №1

The introduction of the logical OR assignment operator ||= seems to have been included in ES2021. Even though it works on my local Node 16 environment, it is not compatible with Node 14, which is the highest version currently supported by Vercel.

Until Vercel upgrades to support Node 15 or higher, I will need to revert to using pdf.js-dist 2.10.377. Since the pdf viewer functionality is specifically for web browsers, I may also consider implementing a dynamic import solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access the most up-to-date information through the API URL

Objective: Whenever the 'Test' Button is clicked, new data must be fetched from the backend using the API link and displayed on the modal form. Issue: If text in the input box is changed or deleted, then the modal is closed and the 'Tes ...

reactjstypescriptreact-hooksuse-effect

Will my NextJS 13 project remain server-side if I incorporate Redux?

I am looking to implement Redux in my NextJS 13 project with a specific folder structure. However, in order to do so, I need to use a provider which will be located in layout.jsx file. The provider requires the use of "use client" annotation to make it a c ...

reactjsreduxnext.jsreact-reduxserver-side-rendering

A guide on redirecting a request to another route within the router in Next.js

In the scenario where I have two paths in Next.js (page router) that correspond to the current URL - [...slug].ts and something.ts, there can be a situation where the URL example.com/something matches both patterns, ultimately leading to the more specific ...

next.js

What is the best way to send an observable with parameters through @Input?

The objective is to transfer an http request from Component 1 to Component 2 and initialize its parameters on Component 2. Here is a pseudo code representation of my approach: Component 1 HTML <app-component-2 [obs]="obs"></app-component-1> ...

htmlangulartypescriptparametersobservable

Issue arose while attempting to use Jest on a React Native application integrated with TypeScript (Jest has come across an unforeseen token)

Seems like everyone and their grandmother is facing a similar issue. I've tried everything suggested on Stack Overflow and GitHub, but nothing seems to work. It should be a simple fix considering my project is basic and new. Yet, I can't seem to ...

reactjstypescriptreact-nativejestjsbabeljs

Guide on Setting Up Role-Based Access Control in Next.js Using Cookie-Based Session Authentication with NestJS Backend

I'm currently working on a project that involves using NestJS for the backend and Next.js 14 (app router) for the frontend. The backend utilizes cookie-based session authentication, where the session ID is stored in a cookie. I am looking for assistan ...

next.jsnext-intl

What is the best way to initialize a value asynchronously for React context API in the latest version of NextJS, version

Currently, I'm working on implementing the React context API in my NextJS e-commerce application to manage a user's shopping cart. The challenge I'm facing is how to retrieve the cart contents from MongoDB to initiate the cart context. This ...

javascriptreactjstypescriptnext.jsserver-side-rendering

A guide on efficiently utilizing combineLatest and mergeMap for handling multiple subscriptions

As I continue to delve into the world of rxjs, I've encountered an issue with managing multiple subscriptions. Specifically, I'm struggling to extract an ID from a response in order to correctly associate photos with products. create(product) { ...

angulartypescriptrxjs

There seems to be an issue with the Next.js server: The edge runtime is not compatible with the Node.js 'stream' module

I've set up Next.js in a local environment / docker compose with mongodb. Currently working on configuring the auth and middleware. In my auth.config.ts, used in the middleware.ts as const { auth } = NextAuth(authConfig);, there's an async func ...

next.jsnext-auth

Implementing dynamic image insertion on click using a knockout observable

I'm utilizing an API to retrieve images, and I need it to initially load 10 images. When a button is clicked, it should add another 10 images. This is how I set it up: Defining the observable for the image amount: public imageAmount: KnockoutObserva ...

javascriptknockout.jstypescript

(Express JS) What is the correct way to integrate another module into my router? (I am consistently encountering an undefined reference error)

I am currently working on a basic PDF reader application that utilizes the pdf.js library from Mozilla. The user is expected to select a file, after which the website should automatically redirect to the /reader page displaying the PDF. However, I am facin ...

javascriptnode.jsexpresspdf.js

Vue.js is unable to recognize this type when used with TypeScript

In my code snippet, I am trying to set a new value for this.msg but it results in an error saying Type '"asdasd"' is not assignable to type 'Function'. This issue persists both in Visual Studio and during webpack build. It seems like Ty ...

visual-studiotypescriptwebpackvue.js

Tips for Simplifying Complex Switch Cases with Object Literals in TypeScript

I have a unique situation where I need to switch between two functions within an object literal. One function takes two numerical arguments, "A" and "B", while the other function only takes a single string argument, "C". My TypeScript code showcases my di ...

angulartypescript

Can someone assist me in creating mongoose models?

Currently, I am focused on managing products and categories These are the two types I have created: type Category = { parent: Category | null; // Is this acceptable? name: String; }; type Product = { categories: Category[]; name: String; ...

typescriptmongodbexpressmongooseschema

Triggering a router push inside useEffect can lead to the effect being constantly executed in a never-ending loop

In my NextJs project, I've implemented a component that utilizes the useDebounceHook for handling search functionality. This is how the component is structured: import { useRouter } from 'next/router'; function SearchComponent() { const r ...

reactjsnext.js

The function navigator.canShare() encountered a permissions denial while running in Typescript

Currently, I am in the process of developing an Angular8 PWA and have successfully implemented webshare to share text content. To my excitement, Chrome has now extended its support for file sharing starting from May 2019. However, while attempting to int ...

typescriptgoogle-chromeprogressive-web-appsnavigator

Encountering an Unexpected Token Error while using Jest in Next.js for node-modules

After setting up my Next.js project, I decided to install jest by running the command below: npm i --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom I then created a jest.config.json file with the following code snipp ...

javascriptnext.jsjestjs

Having trouble retrieving image using "image-to-base-64" in react?

Utilizing the package "image-to-base64" for converting images from URLs to base64 is resulting in an error when attempting to fetch images: TypeError: Failed to fetch at imageToBase64Browser (browser.js:11:1) at convertImage (mealPlanTablePDF.tsx:2 ...

javascriptreactjsnext.jsbase64image-conversion

Is there a substitute for useState in a Next.js server component?

With my static site at , the only interactive feature being the dark mode toggle, I understand that using useState is not feasible in a server component. export default function RootLayout({ children }: { children: React.ReactNode }) { const [darkMode, ...

javascripttypescriptnext.jstailwind-cssserver-side-rendering

Utilizing Environment Variables from SASS within Next.JS

I've been exploring ways to incorporate a variable from my scss files that references an .env variable. After going through several tutorials, I came across this resource. To implement this, I need to make adjustments in my next.config.js. const withI ...

webpacksassenvironment-variablesnext.js