Error: The build process for Next.js using the command `npm run build`

Currently attempting to construct my application with target: 'serverless' set in the next.config.js file (in order to deploy on AWS Lambda). Upon running npm run build, I am encountering the following output:

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled  

info  - Using external babel configuration from C:\Users\User\Desktop\mysite\.babelrc
info  - Creating an optimized production build  
warn  - Compiled with warnings

./node_modules/require_optional/index.js
Critical dependency: the request of a dependency is an expression     

... (similar errors listed)

> Build error occurred
Error: package.json does not exist at C:\package.json
    at Object.module.exports.wr/F.exports.find ... 
    (... additional error logs)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
(... additional npm error log) 

What could be the significance of this particular error?

Error: package.json does not exist at C:\package.json

Furthermore, how should one interpret all these Module not found: Can't resolve errors that are showing up?

EDIT:
I do have a package.json within the project folder.
When executing npm run dev, it functions without any issues.
I'm perplexed as to why it's flagging C:\package.json specifically
(Since the project resides under C:\Users\User\Desktop\mysite)

Answer №1

Running npm run executes the code within the script section of your package.json file in the current directory, but it seems to be causing an issue here. There could be two potential reasons for this.

1/ Your current package.json may be incorrectly referencing C:\package.json and causing the error.

2/ The npm cache might be holding onto C:\package.json for some unknown reason. You can try clearing the cache with npm cache clean or npm cache clean --force

Answer №2

Upon reading this text:

npm ERR! This is probably not a problem with npm.

It seems like the issue may not be related to Npm or nodejs. It could be that some modules are missing in the following directories:

./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in 
'C:\Users\User\Desktop\mysite\node_modules\node-fetch\lib'

./node_modules/mongodb/lib/operations/connect.js
Module not found: Can't resolve 'mongodb-client-encryption' in 
'C:\Users\User\Desktop\mysite\node_modules\mongodb\lib\operations'

./node_modules/node-pre-gyp/lib/util/compile.js
Module not found: Can't resolve 'node-gyp' in 
'C:\Users\User\Desktop\mysite\node_modules\node-pre-gyp\lib\util'

./node_modules/node-pre-gyp/lib/util/compile.js
Module not found: Can't resolve 'npm' in 
'C:\Users\User\Desktop\mysite\node_modules\node-pre-gyp\lib\util'

To troubleshoot, you can run the following commands in the console:

npm install encoding -g
npm install mongodb-client-encryption -g
npm install node-gyp -g
npm install npm@latest -g

After changing directory to "C:\Users\User\Desktop\mysite", run:

npm install encoding --save
npm install mongodb-client-encryption --save
npm install node-gyp --save
npm install npm@latest --save

Also, make sure to initialize your folder by running "npm init" and then make necessary edits.

Answer №3

Encountered an error, but found a solution:

To resolve this issue, make the following changes:

In the packege.json file, under the scripts section, update the "build" property to be "next build && next export", and add a new property "export" with the value "next export"

Create component and data folders at the root of your project

Finally, run the command: npm dev build to generate a folder named "out" with the required files.

View package.json View out folder

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

Can pages be embedded within other pages in Next JS?

Let's consider two pages: Page 1 and Page 2. Page 1 is rendered on the server-side, while Page 2 consists of Static HTML content. My goal is to incorporate Page 2 within Page 1. Page 1 provides the structure and relevant information about the logged- ...

Having trouble viewing objects' content in the JavaScript console in Visual Studio 2015?

In the past, I was able to see all the content of my JavaScript objects like this: However, for some reason now, the content is not being displayed at all: I am using Visual Studio 2015 Community with Cordova and Ripple emulator. I have tried creating a ...

There has been an internal server error: TypeError occurred due to the inability to convert undefined or

I'm working on implementing signIn functionality using nextauth.js. Below is the code snippet I am using: import { getProviders, signIn as SignIntoProvider } from 'next-auth/react' import Header from '../../Components/Header' ...

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Providing some context for my page: The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "de ...

Learn the process of obtaining a location and showcasing it on Google Maps

I am working on creating a program that utilizes modernizer to ask for the user's location and then displays it using Google Maps. So far, I have been able to use geolocation to determine the coordinates of the user's location and attempted to in ...

Effortlessly moving through each day on Fullcalendar by utilizing the resourceTimeline feature

I have been using the Fullcalendar plugin and I am wondering if there is a way to navigate from day to day instead of in 3-day increments when using the resourceTimeline view with a duration set to 3 days. Thank you calendar = new FullCalendar.Calendar(ca ...

Warning: Potential critical dependency detected while utilizing react-pdf package

When attempting to showcase a PDF on my react application, I encountered the following warning: /node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be static ...

Override existing Keywords (change false to true)

Are there any ways to overwrite reserved words? It's not something I would typically consider, but it has sparked my curiosity. Is it feasible to set false = true in JavaScript? I've come across instances on different websites where individuals ...

Merge the throw new Error statement with await in a single expression

Is it possible to combine throwing an error and using the await keyword in one statement using the AND operator? The code snippet below demonstrates my intention: throw new Error() && await client.end(). So far, this approach has been working wel ...

Having Trouble with Bootstrap 4: "Encountering Uncaught Error: Tooltip Transition in Progress"

I'm currently utilizing Bootstrap 4 on my website and incorporating the Tooltip feature. While my JavaScript appears to be correctly formatted, there are instances where I encounter errors in Console. My Javascript Setup | Bootstrap 4 <script src ...

Controlled Checkbox Component in React

I'm really struggling with this. While I can easily work with select drop downs and text fields, I just can't seem to get checkboxes to function properly in a controlled manner. I want them to 'toggle' and respond to events in a parent ...

Is there a way for me to determine when AJAX-loaded content has completely loaded all of its images?

After making an AJAX request to load HTML, it includes img tags within it. I am in need of a way to detect when these images have finished loading so that I can adjust the container size accordingly. Since I do not know how many images will be present in ...

The issue I'm facing is that the style loader is failing to load the CSS within the <head

I am currently facing an issue with importing my CSS into my webpack bundle for our Angular 1 application. Initially, everything was working fine as we bundled our application using Webpack. The HTML included the bundle and vendor scripts, additional Java ...

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

const functionArray: Function = Uint32Array; new fArr(5); The code snippet above is functioning properly. However, TypeScript is throwing a TS2351 error: "This expression is not constructable. Type 'Function' has no construct signatures". I wo ...

Next.js TypeScript throws an error stating that the object 'window' is not defined

When trying to declare an audio context, I encountered an error stating that window is undefined. I attempted declaring declare const window :any above window.Context, but the issue persists. Does anyone have a solution for this problem? window.AudioCont ...

Is it possible to use the map function to update the class name condition?

Having trouble adjusting a classname condition within a React map. I am attempting to display various modals located within the map, each with a different state name, but unfortunately, {item.value} is not functioning as expected. Here is the code snippet ...

Include dropdown lists for selecting the year, month, and day on a web page

Is there a way to implement a dropdown style date selector that dynamically updates the number of days based on the selected year and month using JavaScript? For example, February 2008 has 29 days, April has 30 days, and June has 31 days. Any suggestions ...

What is the best way to initiate a re-render after updating state within useEffect()?

I'm currently strategizing the structure of my code using React hooks in the following manner: Implementing a state variable to indicate whether my app is loading results or not The loading state turns to true when useEffect() executes to retrieve da ...

How can I identify where a Mesh and Particle System intersect in Three.js?

I have a unique setup where I have a particle system utilizing sprites, housed in an Object3D akin to the "interactive / points" example from three.js. Additionally, I have a simple sphere mesh that tracks my cursor's movements. Check out the example ...