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)

javascriptnext.js

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

Having trouble retrieving data from the table with AJAX and CodeIgniter

I am currently developing a comprehensive HRM+CRM system (Human Resource Management and Customer Relation Management). I have encountered an issue while trying to generate an invoice for each customer. I am struggling to resolve this problem and would appr ...

javascriptphpjqueryajaxcodeigniter

Protractor's count() function fails to execute properly when called outside of a promise loop

var alerts = element.all(by.xpath("//div[@class='notification-content']")); alerts.count().then(function (val) { console.log(val); }); let compareValue = val; Is there a way to access the 'value' outside of the promise l ...

javascriptselenium-webdriverprotractor

What is the best way to turn my thumbnail into a clickable link while having the title positioned to the right?

Is there a way to create a thumbnail that acts as a link and position the title next to the thumbnail? I have experimented with using 'after' and modifying the HTML structure to align them horizontally. Any ideas on how I can achieve this layou ...

javascriptjquery

Can you provide an alternative code to access an element with the id of 'something' using vanilla JavaScript instead of jQuery's $('#something') syntax

Why am I seeing different console output for $('#list') and document.getElementById("list")? Here is the console printout: console.log($('#list')); console.log(document.getElementById("list")); However, the actual output in the cons ...

javascriptjquery

Experiencing an excessive number of re-renders can be a common issue in React as it has limitations set in place to prevent infinite loops. This

I have integrated React context to access the login function and error from the context provider file for logging into the firebase database. I am trying to display any thrown errors in the app during the login process. However, I encountered an issue whe ...

javascriptreactjsreact-nativereact-hooksreact-context

Tips for implementing try-catch with multiple promises without utilizing Promise.all methodology

I am looking to implement something similar to the following: let promise1 = getPromise1(); let promise2 = getPromise2(); let promise3 = getPromise3(); // additional code ... result1 = await promise1; // handle result1 in a specific way result2 = await ...

javascriptnode.jspromise

When accessing a page from a link, JavaScript sometimes does not immediately execute on the first attempt

I'm encountering a strange issue in my rails application, where a template fails to execute the Javascript code the first time it is loaded via a link on my home page. This problem only occurs when accessed through the link for the first time. I' ...

javascriptruby-on-railsturbolinks

Jquery Ajax failing to retrieve a response

Here's the jQuery script I am using to fetch data from my server: $(".login_button").click(function () { var username = $(".username").val(); var userkey = $(".userkey").val(); $.ajax({ type: "GET", url: "http://192.168.0. ...

javascriptjqueryjsonajax

Managing all AJAX success events in one centralized location using jQuery

In a particular situation, I find myself needing to handle all jquery success events in one centralized location. This is because I want a specific function to be called after every ajax success event occurs. While I am aware that I can use $.ajaxComplete ...

javascriptjqueryajax

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

Encountered an issue that has me puzzled. To give you some context, I attempted to create a native draggable slider using React and positioned it in the center of the screen, specifically within my Codesandbox file. The code snippet I utilized is as follow ...

javascriptreactjsnext.jsjsx

The React onChange event fails to trigger

Why isn't the onChange event firing in the input tag? I used LinkedStateMixin to track the input value before, but now I want to add an onChange event to run a function. After removing LinkedStateMixin, the onChange event still doesn't fire. I ev ...

javascriptreactjs-flux

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

I am exploring the potential for allowing users to insert their own code into a Node application that is running an express server. Here's the scenario: A user clicks 'save' on a form and wants to perform custom business validations. This ...

javascriptnode.jstypescriptnode-vm2

Browserify pulls in entire module even if only specific parts are utilized, such as react-addons

I am currently using Browserify to bundle my server-side react.js code for the client. There is a concern that utilizing a module from an npm package may result in the entire package being bundled by Browserify. Question: Will require('react-addons& ...

javascriptnode.jsnpmreactjsbrowserify

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Add ...

javascriptjqueryhtmlcss

Asynchronous callback in mongoose with an undefined value

I am utilizing 'mongoose' and 'async'. While my search functionality is operational, I encounter an issue where my data does not get passed in the final callback. The variable always ends up being undefined. Despite referencing the mong ...

javascriptnode.jsmongodbasynchronousmongoose

Creating an extra dialogue box when a button is clicked in React

Having an issue with displaying a loading screen pop-up. I have an imported component named LoadingDialog that should render when the state property "loading" is true. When a user clicks a button on the current component, it triggers an API call that chang ...

javascriptreactjsmaterial-ui

locate missing Gutenberg block on map

/** * Custom Block: display-mobile-advertising * * This block registers a basic block with Gutenberg that renders and saves content without any interactivity. */ // Import CSS. import { TextareaControl } from '@wordpress/components'; import ...

javascriptphpreactjswordpresswordpress-gutenberg

Failure of AJAX to transmit variable to PHP script

I am relatively new to PHP and currently working on the dashboard page of a website where an administrator can view all existing admins. Each admin's row has a button that is supposed to check their privileges, such as access to article editing and cl ...

javascriptphpajax

What are the appropriate levels of access that an operating system should provide for web-based scripting?

Contemplating the level of access web-based applications have to an operating system has been on my mind. I'm pondering: What is the most effective method for determining this currently? Are we seeing a trend towards increased or decreased access? ...

javascriptscriptingoperating-system

Locate the index of an item within an array of objects based on a matching property in the

My current situation involves having an array of objects structured like this : [ {label: "<p>Opacity | %<br/></p>", customRow: false, id: 0, items: Array(13)}, {label: "Brand_hs_id", customRow: false, id: 0, items: A ...

javascript