The Next.js template generated using "npx create-react-app ..." is unable to start on Netlify

My project consists solely of the "npx create-react-app ..." output. To recreate it, simply run "npx create-react-app [project name]" in your terminal, replacing [project name] with your desired project name.

Attempting to deploy it on Netlify Sites like this:
https://i.stack.imgur.com/ZjdSx.png

The Netlify console displayed:

6:26:29 PM: build-image version: 4c0c1cadee6a31c9bb8d824514030009c4c05c6a (focal)
6:26:29 PM: build-image tag: v4.15.0
6:26:29 PM: buildbot version: 8e21f3a6f94b4bf664f0a5ce69b751fdfc9791bd
...
6:27:08 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:27:08 PM: Failing build: Failed to build site
6:27:08 PM: Finished processing build request in 39.873911654s

Why is this not working? It's just a basic boilerplate code. What modifications are needed for it to function properly?

typescriptnpmnext.jsbuildnetlify

Answer №1

By changing the images.loader setting to 'imgix', there may have been build errors encountered. To resolve this, consider updating your configuration as follows:

// next.config.js

module.exports = {
  images: {
    loader: 'akamai',
    path: '',
  },
}

The acceptable values for images.loader include: [ default, imgix, cloudinary, akamai, custom ] reference

P.S. from Original Poster (OP): The "Build command:" used is 

npm run build && npm run export
, the "Publish directory:" specified is out, and an additional variable NETLIFY_NEXT_PLUGIN_SKIP has been set to true

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

What is the process for establishing the initial route in next.js?

When setting up the initial route in React, the homepage is specified in the `package.json` file: { "name": "frontend", "version": "0.1.0", "private": true, "homepage": "http://lo ...

reactjsnext.js

What are the steps to publish a stand-alone application as an npm package?

Is it possible to package an npm module as the main application? I typically use git to install applications like this: git clone https://github.com/me/myapp.git cd myapp npm install When using npm install, all dependency modules are placed under the no ...

node.jsnpmnpm-install

Exploring the potential of React with Typescript: Learn how to maximize

Having some difficulties working with Amplitude in a React and Typescript environment. Anyone else experiencing this? What is the proper way to import Amplitude and initialize it correctly? When attempting to use import amp from 'amplitude-js'; ...

reactjstypescriptamplitude-analytics

React Native dependency issue causing installation problem

Just diving into the world of React Native, I decided to streamline my UI design by installing @shoutem/ui. However, after installation, I encountered a dependency error when running my application: I then proceeded to install string_decoder (npm install ...

node.jsmobilenpmreact-nativenpm-install

Issue with NPM Parallelshell, error being displayed

I attempted to simultaneously run npm lite server and onchange for scss as instructed in my course, but encountered an error instead... When I tried running npm start with package.json containing the script below - "scripts": { "start": "npm run watch ...

npmnpm-scriptsnpm-package

When inserting the form component from Material UI into a different page in Next.js, the form inputs become jumbled and display incorrectly

After creating a new component for my contact form, I encountered an issue when trying to import it into the contact page. The styling of the inputs is completely messed up, appearing as tiny boxes aligned to the right of the screen. What could be causing ...

reactjsmaterial-uinext.js

Properly display a markup string within React components

I am currently facing a minor issue with my Hygraph CMS setup that is causing a slight roadblock. I have integrated React/Next JS for the front end, and typically, cases involving dangerouslySetInnerHTML or import parse from 'html-react-parser' s ...

reactjsnext.js

Executing a NestJs cron job at precise intervals three times each day: a guide

I am developing a notifications trigger method that needs to run three times per day at specific times. Although I have reviewed the documentation, I am struggling to understand the regex code and how to customize it according to my requirements! Current ...

javascriptnode.jstypescriptnestjscron-task

There has been no answer provided. Could this be due to being utilized in an asynchronous function that was not returned as a promise?

I encountered the following error message: Error: No response has been set. Is this being used in an async call that was not returned as a promise to the intent handler? at DialogflowConversation.response (/user_code/node_modules/actions-on-google/dis ...

typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functionsactions-on-google

The Docker-compose encountered an error when it could not locate the react-scripts. This resulted in an npm error with the code EL

Encountered an error while running the docker-compose up command for my Node.js application with MongoDB. The objective is to containerize this application and deploy it on Docker Hub. 1. Creating mongo ... done 2. Creating app ... done 3. Attaching t ...

node.jsmongodbdockernpmmongoose

Experiencing an error message stating 'The token ${Token[TOKEN.72]} is invalid' while using cdk synth, specifically when trying to assign the value of ec2.Vpc.cidr from cfnParameter.value

Attempting to utilize the AWS CDK CfnParameter to parameterize the CIDR value of ec2.Vpc. The aim is to make the stack reusable for VPC creation with the CIDR as a customizable value. An error stating "${Token[TOKEN.72]} is not valid" occurs during synthe ...

typescriptaws-cloudformationaws-cdk

What is the process for reversing a "lerna link convert"?

According to the documentation on Common devDependencies: You can use lerna link convert to bring most devDependencies up to the root of a Lerna repository. This will move all devDependencies from each package's package.json file to the root packag ...

node.jsnpmlerna

Unable to execute two scripts at the same time using npm

Currently, I am facing an issue while trying to execute two scripts within my fullstack application from the root directory. The structure of the root directory is as follows: ./client ./server ./package.json (which should run both client and server). Both ...

npmpackage.jsonmernreact-fullstack

How to efficiently store and manage a many-to-many relationship in PostgreSQL with TypeORM

I have a products entity defined as follows: @Entity('products') export class productsEntity extends BaseEntity{ @PrimaryGeneratedColumn() id: number; //..columns @ManyToMany( type => Categories, categoryEntity => cat ...

javascripttypescriptnestjstypeorm

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

Struggling to handle a 204 status response in my post request using fetch and typescript. I've attempted to return a promise with a null value, but it's not working as expected. postRequest = async <T>(url: string, body: any): Promise ...

javascripttypescriptfetch

What is causing my React project to not open when I run npm start?

I am eager to dive into building React applications. I recently installed node.js and npm on my system. I attempted to run some basic commands in the command prompt, but the final one seems to do nothing (npm v6.14.4, node v12.16.3). Being new to frontend ...

reactjsnpmfrontend

There is a potential risk of NextResponse.json file compromising the integrity of JSON

Running nextjs 13.5.3 and implementing an API route handler under /app This route handler mainly fetches data from a CMS and then returns the response. The IDs on the client side are hashed, so one of the functions is to unhash the IDs from a request and ...

javascriptjsonnext.js

Is it possible for changes made to an object in a child component to be reflected in the parent component

When passing an object to the child component using , how can we ensure that changes made to a specific property in the object within the child component are visible in the parent component? In my understanding, changes would not be reflected if we were p ...

angulartypescript

Making changes to a variable or option through the props in a different file

In the index.js file, I have implemented getStaticProps() to fetch data from an exported function. This function requires 2 parameters, one for the type of listing and the quantity. export async function getStaticProps() { const type = 0 const data = a ...

javascriptreactjsnext.js

Unable to locate the "fcm-node" module in Node.js with TypeScript

When working on a TypeScript project, I usually rely on the fcm-node package to send Firebase push notifications in Node.js. However, this time around, I faced an issue. I know that for TypeScript projects, we also need to install type definitions (@types ...

javascriptnode.jstypescriptexpressfirebase-cloud-messaging