Error encountered: 'Headers' is not defined - Developing Next.js version 14 application using AWS CodeBuild

After successfully building my Next.js app on AWS CodeBuild for several years, I decided to update it from version 13 to version 14. However, following this update, my builds started failing with an error message:

unhandledRejection ReferenceError: Headers is not defined
    at Object.<anonymous> (/codebuild/output/src3629032198/src/node_modules/next/dist/server/web/spec-extension/adapters/headers.js:32:30)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    ...

It seems like the error lies within the Next.js codebase itself and not in my own code which has no reference to "Headers". Has anyone experienced a similar issue and can offer some suggestions for a solution?

Potentially helpful information:

My NPM build script in package.json is:

"build": "NEXT_PUBLIC_VERSION=$npm_package_version NEXT_PUBLIC_DATE=$(date +%s) next build"

My buildspec.yml file contains:

version: 0.2
phases:
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build
artifacts:
  files:
    - '**/*'
  base-directory: build

And my next.config.js includes:

const isLocal = process.env.NODE_ENV === 'development';

const nextConfig = {
  trailingSlash: true,
  output: 'export',
  distDir: 'build',
  ...
};

module.exports = nextConfig;

Note:

In Next.js 13, my build script included "&& next export -o build" at the end but after upgrading to version 14, instructions suggested moving this to next.config.js:

output: 'export',
distDir: 'build',

Answer №1

In order to run NextJs 14, a node version of >=18.17 is necessary. Unfortunately, this required version is not included in the standard Amazon Linux 2 build image. To resolve this issue, you will need to adjust the build settings to utilize the Amazon Linux 2023 build image instead and specify that NodeJs version should be set to >= 18.17. This method successfully enabled me to get my setup operational.

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

Preserving User Login Details during Page Refresh in AngularJS

I am currently working on retaining user information even when the page refreshes. To achieve this, I have implemented the use of cookieStore in my Angular App. Here is how my run module looks like: .run(['$rootScope', '$cookieStore', ...

Attempting to transfer a newly created element from one location to another within the document after it has finished

I'm currently updating the design of my website. The currency selector app by Shopify is placed at the bottom, which has caused confusion for my international customers. To resolve this issue, I want to move it to a specific div class called .CSPositi ...

Utilizing the latest AWS SDK v3 and the revamped NextJS app router for seamless uploading to S3 in NextJS

I'm currently exploring the process of uploading to S3 through NextJS. My preference is to utilize the presignedURL method, particularly with the more recent v3 AWS SDK for avoiding deprecation warnings related to the older version that will soon be i ...

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...

Experience the enhanced features and optimized performance of Onsen 2.0 compared to the earlier version

Apologies if this question is too simplistic, but I am finding some conflicting information in the documentation about using Onsen with Monaca. I am currently utilizing Monaca cloud and I prefer to work solely with pure JS, without incorporating Angular ...

Identifying the transfer of an item between two knockout observable arrays

Currently, I am in the process of developing a web application using query and knockout frameworks. Within this application, there are multiple sortable lists of items on a specific page. With the help of Ryan Niemeyer's example, I have successfully i ...

Is it possible to incorporate a button and a click event into this JavaScript function?

For over a day, I've been attempting to include three functionalities in this code, but have yet to succeed. 1° My goal is to insert a button on this page. I've attempted to create a standard button using HTML and CSS, but the fireworks displa ...

Troubleshooting issue with JsHint when integrating Underscore and Google Maps within Angular service modules

Currently, I am utilizing mean.js and I have incorporated Underscore (via a static file) and Google Maps (from their CDN). While working on a service, I encounter an error from JsHint as soon as I save the file: ^ '_' is not defined. as well a ...

Guide on displaying the appropriate child "div" with jQuery?

I am facing a challenge with my two dependent dropdowns that toggle the visibility of divs based on user input. The first div is functioning correctly, however, every time the user makes a selection in the second div, it impacts the first div. $(docume ...

issue with phonegap android app not logging to console

When trying to use console.log("Test Text") on the android emulator, I encountered an issue where it doesn't work. Strangely enough, it works perfectly fine on the iPhone emulator. I am currently working with phonegap using HTML/CSS/JavaScript and I n ...

Using Jest: A guide to utilizing a mocked class instance

When working on my frontend React application, I decided to use the auth0-js library for authentication purposes. This library provides the WebAuth class which I utilize in my code by creating an instance like so: import { WebAuth } from 'auth0-js&ap ...

Is there a method to iterate through an HTML quiz in order to extract text from "label for" with the value of "true"?

I need assistance with extracting all the correct answers from a multiple choice radio button quiz. The correct answers are identified by the attribute value="true" in the HTML code. Is there a way to iterate through and retrieve the text of all the corr ...

Sort subcategories based on the selected category from the dropdown menu

I'm feeling a bit stuck at the moment. My goal is to show specific subcategories when a particular category is chosen from the dropdown menu. For example, let's say we have these categories: Cate1 Cate2 Under Cate1, we can find: Sub1 Sub2 an ...

The Ajax request returned a status of 200, yet an error message was displayed

Even though the status is 200, why does it print the error message inside alert("error...");? function makeSelect() { var blouseoption = document.querySelector('input[name="blouseoption"]:checked').value; var url = "http://dukano.co/sakh ...

I am looking to create a side menu that will allow for dynamic class changes upon clicking

I'm looking to create a dynamic side menu that changes class on click event. My goal is to have jQuery add a class to a clicked "li" element that doesn't already have the class "active", while removing the class from other "li" elements. I want ...

Innovative Forms for Invoices with interactive fields for easy data entry and seamless

I'm currently working on developing a form for generating invoices. Right now, the form includes fields for: Product Name, Quantity There's also an "add more" button that allows users to add additional rows of these form fields. The data is th ...

CSS animations for loading page content

Currently, I am incorporating animations into my project using HTML5 and CSS3, and the progress has been smooth. I have been able to achieve effects such as: #someDivId { position: absolute; background:rgba(255,0,0,0.75); transition: all 0.7s ...

Identifying the conclusion of a lengthy request in NodeJS/Express

Currently grappling with Server-sent events, my pseudo-code setup involves the following: var listeners = []; app.get('/stream', function (req, res) { listeners.push({ req: req, res: res }); }); // ... some action takes place notify(listene ...

Utilize AngularJS to bind a variable and display an external HTML file without the need to open it in a browser

In my setup, I have two HTML Views - one is for application purposes and the other is for printing. Let's call them Application.html and PrintForm.html, respectively. Here is a snippet from Application.html: <!DOCTYPE html> <html> < ...

Utilizing ThreeJS to Implement Targeted Bloom Effects on Individual Object Components with Emission Mapping

I have a project where I need to showcase 3D objects with small LED lights that should emit a glow effect. I've attempted to use UnrealBloom, but the issue is that it affects the entire scene and makes everything look blurry, not just the parts with t ...