Error encountered while executing npm run dev in the node module for next.js: token not recognized

Setting up a new Next.js project has been my latest task. I followed the instructions in the documentation exactly and used this command line:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

However, when I try to run npm run dev, I encounter a SyntaxError:

/Users/user/nextjs-blog/node_modules/next/dist/build/utils.js:1190
        additionalSsgPathsByPath[pathsPage] ||= {};
                                            ^^^

SyntaxError: Unexpected token '||='
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/user/nextjs-blog/node_modules/next/dist/build/worker.js:13:14)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)

If anyone can shed light on why this error is occurring, I would greatly appreciate it.

Thank you in advance!

npmnext.js

Answer №1

The Logical OR assignment operator is not compatible with Node version 14, which is causing the error mentioned above.

To resolve this issue, consider upgrading to the most recent version or switching to version 16.

Learn more about Logical OR assignment here.

Answer №2

If you're facing the same issue, consider upgrading your node version like I did. I had been using node14 initially, but switching to node16 resolved the problem for me.

After changing to node16, I was able to run npm run dev without any issues.

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

Frontend excel file download facilitated by excel4node backend integration

Although this question has been asked previously, I am struggling to make it work. The backend is sending the file using wb.write('filename.xlsx', res), but on the frontend, I only receive an object response. How can I ensure that the browser dow ...

expressnext.jsexcel4node

What could be causing the error "Unexpected identifier 'trytoCatch' while trying to minify?

I recently updated my script.js and now I'm looking to use "minify" in Node.js to compress it. When I type the command minify script.js > script.min.js into the terminal, I get an error message that says: /node_modules/bin/minify.js:3 import "tryToCat ...

javascriptnode.jsnpm

Tips for handling the final row of a CSV file in Node.js with fast-csv before the 'end' event is triggered

After using fast-csv npm, I noticed that in the code provided below, it processes the last row (3rd row) of CSV data only after triggering the "end" event. How can this issue be resolved? ORIGINAL OUTPUT : here processing request here processing re ...

javascriptnode.jscsvnpmcallback

Navigating within a class-based component using Next.js: A brief guide

Is it possible to create a redirect from within an onSubmit call while maintaining CampaignNew as a class-based component? I have provided the code snippet below, and I am looking for guidance on achieving this. import React, { Component } from "rea ...

javascriptreactjsnext.js

Leveraging webpack for loading images in a React application

I am encountering an issue with loading images after deploying to the server. I am unsure of the cause, but only a few images seem to render properly when using npm. Upon analysis: https://i.stack.imgur.com/ICgCN.png If the images load correctly with a ...

reactjsimagenpmwebpack

What could be causing the error message to appear stating that each list item must have a unique key when utilizing react-bootstrap in Nextjs?

My file currently contains keys for each child component, but it is still raising an error internally. I am unsure if I can resolve these issues on my own. export default function SecondaryNav(props:NavItems) { const router = us ...

javascriptreactjsnext.jsreact-bootstrap

The npm package has been successfully installed, but VS Code is having trouble locating it

Currently, I am in the process of developing a simple npm package known as type-exception using TypeScript. After successful test runs and publication on NPM, I have been able to install it into another project (project B). However, upon importing it as a ...

node.jstypescriptnpm

Building a versatile component library for Next.js using TypeScript and Tailwind CSS: Step-by-step guide

Lately, I've been utilizing Next.js and crafting components such as buttons, inputs, and cards with Tailwind CSS for my various projects. However, the repetitive task of rewriting these components from scratch for each new project has become quite tir ...

reactjstypescriptnext.jstailwind-cssnext.js13

Server-side rendering issue arises post updating to Material UI 5 (with Next.js)

After upgrading my app with server-side rendering (SSR) from version 4 to version 5 of MUI, I encountered an issue. Despite following the official migration guide, I found that when JavaScript was disabled, the page rendered as raw HTML without any CSS sty ...

next.jsmaterial-uiserver-side-rendering

Struggled with setting up the WebSocket structure in typescript

Issue Running the code below results in an error: index.tsx import WebSocket from 'ws'; export default function Home() { const socket = new WebSocket('ws://localhost:1919/ws'); return ( <div>Home</div> ); } ...

typescriptnext.jswebsocket

Double invocation of useEffect causing issues in a TypeScript app built with Next.js

My useEffect function is set up with brackets as shown below: useEffect(() => { console.log('hello') getTransactions() }, []) Surprisingly, when I run my app, it logs "hello" twice in the console. Any thoughts on why this might be ...

javascriptreactjsnext.jsfrontend

We're unable to locate the module: Error - The file 'react-bootstrap-validation' cannot be resolved

Query I am encountering an error message in webpack that says: Error: Cannot find module 'react-bootstrap-validtion' at Function.Module._resolveFilename (module.js:339:15) at Function.Module._load (module.js:290:25) at Module.requir ...

node.jsreactjsnpmreact-bootstrap

The UseEffect hook continues to run even if the dependency (router.query) remains the same

useEffect(() => { console.log('applying filter'); const updatedFilters = { status: { values: { label: router.query.status, value: router.query.status }, }, // Add additional filter properties here... }; ...

javascriptreactjsnext.js

What is the process for assigning global or environment variables to my personal npm package or node module within a project?

I created my own npm package for React, which we'll call @group/package. Within this package, I developed exportable hooks. One example is a hook called useFetchWithRefreshToken. This hook always calls the same API_URL, but the specific URL depends on ...

reactjsnpmbabeljsrollupjs

Creating a custom JavaScript library using an existing npm module (codius)

Embarking on a new journey with this, never tried it before. Currently utilizing https://github.com/codius/codius-host. The development of Codiu§ has been abandoned, however I am determined to salvage some parts of it for my own project. It is crucial fo ...

javascriptnode.jsnpm

Encountering issues with Next.js routing - Pages failing to load as expected

Having some trouble with the routing in my Next.js application. I've created a page named about.tsx within the "pages" directory, but when trying to access it via its URL (localhost:3000/about), the page fails to load correctly and displays: This Pa ...

node.jsreactjstypescriptnext.js

The class name remains unchanged despite the change in value

I am currently working on a webpage that features two interactive tabs. The goal is to have one tab highlighted as "active" while the other remains inactive when clicked, and then switch roles when the other tab is selected. Below is the code snippet I ha ...

javascriptreactjsreact-hooksnext.js

Error in electron-builder: Module 'dmg-license' was not found

Seeking a straightforward method to create an electron app for macOS from a Linux machine. Unfortunately, the electron-builder -m command is not functioning properly. Here is the complete output of the command: electron-builder -m • elec ...

javascriptmacosnpmelectronelectron-builder

Azure DevOps - npm unseen

I am facing an unusual issue with a deployment pipeline on Azure DevOps. There are two tasks involved: 1) Installing packages 2) Running npm with the installed packages The process seems straightforward. Here is what I have been doing: 1) Using a Comm ...

npmazure-devopsnewmanpostman-collection-runner

Alert: npm indicates an absence or outdated status of a package

After running npm install, I encountered the following warnings: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de5ecffa0fbece1e4e9ecf9e2ffcdb8a3bca3b8">[email protected]</a>: this library is ...

node.jsnpmpackage.json