During the build process, NextJS encountered an issue locating the constants.js module

I encountered an error while executing next build using next version ^10.2.3. I attempted to remove the node_modules and .next folders, then reinstalled dependencies with 

npm install && next build
, but the issue persists.

  Error: Cannot find module 'next/dist/shared/lib/constants.js'
  type: 'Error',
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '.next/server/pages/_document.js',
    '/usr/local/lib/node_modules/next/dist/server/require.js',
    '/usr/local/lib/node_modules/next/dist/server/load-components.js',
    '/usr/local/lib/node_modules/next/dist/build/utils.js',
    '/usr/local/lib/node_modules/next/dist/build/worker.js',
    '/usr/local/lib/node_modules/next/dist/compiled/jest-worker/processChild.js'
  ]
typescriptbuildnext.jsbuild-error

Answer №1

Attempt deleting the .next directory and then execute the program once more.

Answer №2

To clear the npm cache, execute the given command in your project's main directory:

npm cache clean --force

Eliminate the package-lock.json file along with the node_modules folder.

Reinstall the dependencies by entering the following command:

npm install

Don't forget to restart your Next.js development server using this command:

npm run dev

Remember to also delete the .next folder for a complete cleanup.

Answer №3

While this solution may not apply to everyone, it worked for me...

I found that adding a .js to the import location in my next.config.mjs fixed the issue.

Instead of:

import { PHASE_PRODUCTION_BUILD } from "next/constants";

I changed it to:

import { PHASE_PRODUCTION_BUILD } from "next/constants.js";

At first, I wasn't sure why this change was necessary, but I decided to try it out and it worked!

Answer №4

Removing constants.js from the package.json file solves the issue.

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

How should one handle the potential risks presented by literal types?

As I was translating a large JavaScript project into TypeScript, something caught my attention. Consider a module that looks like this: WinConstants.ts export = { "no_win":0, "win":1, "big_win":2, "mega_win":3 } I wanted to make it truly constan ...

typescripttypescript2.0

finding the adjacent li element using the document.(property)

Utilizing a pub/sub solution named ably.io for real-time data updates, I have implemented a method that assigns dynamic ids to each ngFor listing. This allows me to easily identify and update the values received from ably.io subscribe. document.getElement ...

angulartypescript

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

Ways to implement the flow of change occurrences in the mat-select component

Seeking assistance with utilizing the optionSelectionChanges observable property within Angular Material's mat-select component. This property provides a combined stream of all child options' change events. I'm looking to retrieve the previ ...

angulartypescriptangular-material

Testing with mount in React Enzyme, the setState method does not function correctly

I've been experimenting with testing this code block in my React App using Jest and Enzyme: openDeleteUserModal = ({ row }: { row: IUser | null }): any => ( event: React.SyntheticEvent ): void => { if (event) event.preventDefault(); ...

javascriptreactjstypescriptjestjsenzyme

Setting up Webpack for Node applications

My current challenge involves configuring Webpack for a node app that already exists. I am encountering various issues and struggling to find solutions or even know where to begin. Situation The project's folder structure is as follows: +---app +-- ...

javascriptnode.jstypescriptwebpacknode-modules

Passing state to getStaticProps in Next JSLearn how to effectively pass state

I am currently fetching games from IGDB database using getStaticProps and it's all working perfectly. However, I now have a new requirement to implement game searching functionality using a text input field and a button. The challenge I'm facing ...

javascriptreactjsapinext.js

Discovering a variable within an enzyme wrapper for the locate function

Struggling through testing with jest + enzyme. I have an array called OptionsArray that contains options mapped to buttons in a component. In my testing suite for the component, I attempted to do the following: import React from 'react'; import { ...

reactjstypescriptjestjsenzymets-jest

Ways to utilize/extract data from an enumeration

Hello there! I am currently diving into the world of React and Typescript, eager to expand my knowledge. Please bear with me if my explanations are not up to par. In my react app, I have a scenario where I created an enum that I want to utilize in two diff ...

javascriptreactjstypescriptenums

Utilizing Observable Data in Angular 4 TypeScript Components

Looking to extract and assign a JSON value obtained from an API into a variable. Here is an example: TS this.graphicService.getDatas().subscribe(datas => { this.datas = datas; console.log(datas); }); test = this.datas[0].subdimensions[0].entr ...

javascriptangulartypescript

Remember to always call "done()" in Typescript + Mocha/Chai when dealing with async tests and hooks. Additionally, when returning a Promise, make sure it resolves correctly

It seems like I'm facing an old issue that I just can't seem to resolve, despite trying everything in my power. The error message reads: Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Pro ...

node.jstypescriptmocha.jschai

"Encountering a problem when trying to display Swagger-Editor for the second

While integrating the swagger-editor package into my React application, I encountered an issue. The first time I fetch the Swagger specifications from GitHub, everything works perfectly and validates correctly. However, upon rendering it a second time, an ...

javascriptreactjstypescriptswagger-uiswagger-editor

The module "install-npm-version" could not be located

I am currently working on a project using TypeScript, which you can find at this GitHub repository. However, when I attempt to use the package in another project, I encounter an error that says Cannot find module 'install-npm-version'. Steps to ...

node.jstypescriptnpm

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

Is it possible to retrieve the signature for every method within a class?

Let's consider a scenario where we have a class defined as follows: class Actions { static FooAction = 'foo' as const; someAction1() { return { type: Actions.FooAction, payload: {a: 1, b:2} }} static BarAction = &apos ...

typescripttypescript3.0

Unreliable Environment Variable Behavior in Next.js 13.4 App Deployed on Cloud Run

Recently, I've been facing a perplexing issue with environment variables in my Next.js app deployed on Cloud Run. Despite working fine most of the time, there are random occurrences when these variables become undefined for no apparent reason. Strange ...

google-cloud-platformnext.jsdeploymentenvironment-variablesgoogle-cloud-run

Component fails to navigate to the page of another component

Hello there. I am facing an issue where the button with routelink in the RegistrationComponent is not routing to the page of LogInComponent and I cannot figure out why. Angular is not throwing any errors. Here is the RouteComponent along with its view: im ...

typescriptangular

Tips on preventing repeated data fetching logic in Next.js App Routes

I'm currently developing a project with Next.js 13's latest App Routes feature and I'm trying to figure out how to prevent repeating data fetching logic in my metadata generation function and the actual page component. /[slug]/page.tsx expo ...

javascriptreactjstypescriptnext.jsnext.js13

How can I store the data retrieved from an API and then forward it to a URL using Angular?

Is there a way to save and pass the data received from an API to a URL in Angular? SERVICE.ts readonly apiUrl = 'http://localhost:49940/'; constructor(private http: HttpClient) { } getUserName(): Observable<any> { return this.http.ge ...

angulartypescriptcomponents

VS Code using Vue is displaying an error message stating: The property '' does not exist on type '{}'.ts(2339)

While working in Visual Studio Code, I came across the following code snippet: <script lang="ts" setup> const parseCSV = () => { // Code omitted for brevity } } </script> <template> <button @click="parseCSV ...

typescriptvue.jsvisual-studio-code