Deployment to Amazon Amplify encounters failure when using Next JS

I've been encountering continuous failures while trying to deploy an SSG app on Next JS. The build consistently fails, and I'm met with an error message. Despite following the deployment documentation for SSG sites on Amazon diligently, the error persists, leaving me unsure of what's causing it.

Here's a snippet from my Amplify app log:

2021-09-24T10:55:48.543Z [HELP]: Outputting the npm debug log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/root/.nvm/versions/node/v12.21.0/bin/node',
1 verbose cli   '/root/.nvm/versions/node/v12.21.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18766875582e36292c362929">[email protected]</a>
3 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6709080302271156554955564957">[email protected]</a>
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="38404142780816091608">[email protected]</a>~build: CWD: /codebuild/output/src168230001/src/xyz
6 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473f3e3d077769766977">[email protected]</a>~build: Args: [ '-c', 'next build && next export' ]
7 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceb6b7b48efee0ffe0fe">[email protected]</a>~build: Returned: code: 1  signal: null
8 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2babbb882f2ecf3ecf2">[email protected]</a>~build: Failed to exec build script
9 verbose stack Error: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="730b0a0933435d425d43">[email protected]</a> build: `next build && next export`
10 verbose stack Exit status 1
11 verbose stack     at EventEmitter.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
12 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1022:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1716152f5f415e415f">[email protected]</a>
15 verbose cwd /codebuild/output/src168230001/src/xyz
16 verbose Linux 4.14.238-125.422.amzn1.x86_64
17 verbose argv "/root/.nvm/versions/node/v12.21.0/bin/node" "/root/.nvm/versions/node/v12.21.0/bin/npm" "run" "build"
18 verbose node v12.21.0
19 verbose npm  v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cab2b3b08afae4fbe4fa">[email protected]</a> build: `next build && next export`
22 error Exit status 1
23 error Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96eeefecd6a6b8a7b8a6">[email protected]</a> build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
2021-09-24T10:55:48.546Z [ERROR]: !!! Build failed
2021-09-24T10:55:48.546Z [ERROR]: !!! Non-Zero Exit Code detected
2021-09-24T10:55:48.546Z [INFO]: # Starting environment caching...
2021-09-24T10:55:48.546Z [INFO]: # Uploading environment cache artifact...
2021-09-24T10:55:48.631Z [INFO]: # Environment caching completed
Terminating logging...
javascriptnext.jsaws-amplifyaws-amplify-cli

Answer №1

The issue turned out to be related to Image Optimization. By incorporating the necessary script into my next.config.js file, I successfully resolved the problem.

const withImages = require('next-images')
module.exports = withImages()

module.exports = withImages({
images: {
    loader: "imgix",
    path: "",
},
exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
    }
  },
})

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 two different versions of a library be utilized simultaneously in NPM?

Currently, our Vue.js app is built with Vuetify v1.5 and we are considering transitioning to Vuetify 2.0. However, the process would involve numerous breaking changes which we currently do not have the resources to address for all components. Is there a wa ...

javascriptvue.jsnpmyarnpkg

Does the positive Z axis move inward in threejs? The behavior of camera.near and camera.far seems strange

My goal is to display only a slice of my 3D object. I have tried setting the orthographic camera's camera.near to 2.0 and camera.far to 1.5, then iterating with values of camera.near = 1.5 and camera.far = 1.0. However, this approach is not yielding t ...

javascriptthree.jsorthographic

Tips for transforming information into JSON format

Imagine having a file with data in CSV or TXT format, such as: Name, Surname, Age, Occupation Gino, DiNanni, 19, Student Anna, Kournikova, 27, Programmer (Extra spaces have been added to enhance readability) The goal ...

javascriptjqueryajaxjson

What is the best way to extract "true" values from an array and store them in a new array during iteration?

I am currently enrolled in a Codecademy course and I am facing a roadblock. My main goal is to gain a solid grasp of JavaScript. The current task at hand is as follows: "There is an array of unnecessary words. Your goal is to iterate over the array and fi ...

javascriptarraysiteration

Implement responsive data tables by setting a specific class for hiding columns

Having trouble assigning a specific class name to individual columns in datatables? It seems that when columns are hidden using the responsive extension, the desired class is not applied. Looking for a solution or workaround. Check out this example from D ...

javascriptjqueryhtmlcssdatatables

Adjust the itinerary's color using leaflet-routing-machine

Is there a way to change the color of the itinerary from red to a different color using the Leaflet routing machine library? I need to modify the styles option with the L.Routing.Line, but I'm not sure how to do it. import L from 'leaflet' ...

javascriptangularjsecmascript-6leaflet

Tips for triggering the JavaScript function within dynamically created textboxes on an ASP .NET platform

I have developed code that dynamically creates textboxes in a modal pop-up each time the add button is clicked and removes them when the remove button is clicked. The validation function in this code checks for valid month, date, and year entries in the te ...

javascriptc#jqueryasp.net

Post request in ExpressJS fails to redirect user after submission

My current project involves developing a web application using NodeJS and ExpressJS. One issue I am encountering is with the login functionality on my website. After filling out the login form, the user's credentials are sent via a post request to the ...

javascriptnode.jsexpressposthttp-redirect

Locate the div in the array that includes ValueA, and save ValueB from it into a new variable

When the button is clicked, I retrieve the current value of a Select control using the following code... $('#myBtn').on('click', function (clickEvent) { var nameSelected = document.getElementById('mySelectControl').getEle ...

javascriptjqueryhtmldom

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

javascriptjqueryhtmlcss

How can Next-auth handle redirection for 401 errors?

Currently, I am utilizing Next-auth in combination with rtk query. My goal is to configure the application so that whenever a request results in a 401 unauthorized error, the page will automatically redirect to the login page. How can this be achieved? I ...

javascriptnext.jsnext-authrtk-query

Ajax is capable of sending images as part of the data payload

I am attempting to send data via Ajax, and this data may include an image. Unfortunately, I do not have any forms, so I am unable to submit in the traditional way. Here is my HTML code: <input type="file" accept="image/png,image/jpg,image/jpeg,image/ ...

javascriptjqueryajax

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

When landing on a YouTube page starting with w*, I have a script that triggers an alert with the URL. However, this only works when entering the page directly or upon refreshing. I am trying to make the alert trigger when navigating internally to that page ...

javascriptgoogle-chrome-extension

Having trouble with the installation of [email protected] on Windows 10 x64?

I am currently in the process of setting up hiredis on my Windows 64-bit operating system as it is a requirement for the node-celery package. My system specifications are as follows: Node v7.9.0 npm v4.5.0 Visual Studio Community 2013 with Update 5 (en_ ...

javascriptnode.jsredisnode-gyphiredis

Angular - Switching Displayed Information

I am currently working with Angular 4 and I am attempting to switch between contenteditable="true" and contenteditable="false" Here is what I have so far: <h1 (dblclick)="edit($event)" contentEditable="true">Double-click Here to edit</h1> Al ...

javascriptangulartypescript

Can a div be relocated within another div based on a random roll of the dice?

Hey there, I'm currently working on creating a simple Monopoly-style game. As someone who is pretty new to JavaScript, I'm looking to figure out how to move the game piece around the board based on dice rolls. Any guidance or assistance would be ...

javascripthtml

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value

I recently started using Vue-Cli3.0 and came across this interesting module for Vue.js called https://github.com/holiber/sl-vue-tree It's a customizable draggable tree component for Vue.js, but I encountered an issue where it couldn't copy funct ...

javascripttypescriptvue.jsvuejs2

JS Issues with generating accurate dates in JS/JS Date perplexities

Creating a custom datepicker has been a challenging task for me. I'm facing difficulties in understanding how JS Date works and need some assistance to bridge this knowledge gap. The issue arises when I attempt to generate dates using a for loop, resu ...

javascriptreactjsdate

What is the best way to showcase information retrieved using the getDocs function from Firebase Firestore?

Hello! I am currently exploring the world of Firestore and facing a challenge. My goal is to retrieve a data object from Firestore, set it as state, and then display it on my application: Below are the imports that I have utilized for this task (please ig ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Express.js encountered a FetchError due to receiving an invalid JSON response body from https://api.twitter.com

I am currently working on a project that involves getting the tweet id as form input and using the Twitter API to retrieve data about that specific tweet. However, I have encountered an issue where the JSON data is not being returned properly. router.post( ...

javascriptnode.jsexpress