next.js: [NextJS 14] AWS Amplify - ReferenceError: Request is not defined

Link to the code that reproduces this issue

https://github.com/baptiste-faure1811/nextjs-14--test

To Reproduce

Using NextJS 14

  • npm run build (success)
  • launch the app (fails - Request reference error)

Current vs. Expected behavior

I am using AWS Amplify to host my NextJS app; using a custom build image: public.ecr.aws/docker/library/node:20.9.0. Everything works fine with NextJS 13.5.6 but when upgrading to NextJS 14 I encounter an error.

When running npm run build, the app compiles successfully but when navigating to the app using my browser it does not work. The AWS amplify logs show this error :

class NextRequest extends Request { 
ReferenceError: Request is not defined

Locally on my computer (with node 20.0.9 as well) it works perfectly, either npm run build or running in development mode (npm run dev). I tried using the default build image provided by AWS but the latest node version is 18.13: lower than the version required by NextJS 14.

I found this issue : https://github.com/vercel/next.js/issues/57214; I am guessing the problem comes from the node version, but I do not know how to solve it as you can see below running node -v outputs v20.9.0.

For now I downgraded to NextJS 13.5.6 and everything works fine.

Here is the build output - everything build successfully :

2023-10-30T13:01:54.659Z [INFO]: # Completed phase: preBuild
                                 # Starting phase: build
                                 # Executing command: node -v
2023-10-30T13:01:54.662Z [INFO]: v20.9.0
2023-10-30T13:01:54.663Z [INFO]: # Executing command: npm run build
2023-10-30T13:01:54.884Z [INFO]: > appywork@0.1.0 build
                                 > next build
2023-10-30T13:01:55.436Z [INFO]: Creating an optimized production build ...
2023-10-30T13:02:02.479Z [INFO]: ✓ Compiled successfully
2023-10-30T13:02:02.481Z [INFO]: Linting and checking validity of types ...
2023-10-30T13:02:06.763Z [INFO]: Collecting page data ...
2023-10-30T13:02:08.206Z [INFO]: Generating static pages (0/62) ...
2023-10-30T13:02:08.951Z [INFO]: Generating static pages (15/62)
2023-10-30T13:02:09.878Z [INFO]: Generating static pages (30/62)
2023-10-30T13:02:10.568Z [INFO]: Generating static pages (46/62)
2023-10-30T13:02:11.566Z [INFO]: ✓ Generating static pages (62/62)
2023-10-30T13:02:12.188Z [INFO]: Finalizing page optimization ...
2023-10-30T13:02:12.188Z [INFO]: Collecting build traces ...
2023-10-30T13:02:22.941Z [INFO]: 
2023-10-30T13:02:22.944Z [INFO]: Route (app)                              Size     First Load JS
                                 ┌ ○ /                                    1.63 kB         110 kB
                                 ├ ○ /_not-found                          0 B                0 B
                                 ├ ● /[city]                              47.6 kB         163 kB
                                 ├   ├ /lyon
                                 ├   ├ /lyon1
                                 ├   ├ /lyon2
                                 ├   └ [+7 more paths]
                                 ├ ○ /api/map-token                       0 B                0 B
                                 ├ ○ /apple-icon.png                      0 B                0 B
                                 ├ ○ /contact                             137 B          80.5 kB
                                 ├ ○ /sitemap.xml                         0 B                0 B
                                 └ ● /workspace/[name]                    398 B          92.8 kB
                                 ├ /workspace/dkgones
                                 ├ /workspace/modjo
                                 ├ /workspace/wojo-grand-hotel-dieu
                                 └ [+40 more paths]
                                 + First Load JS shared by all            80.4 kB
                                 ├ chunks/472-a0556db86ee61e78.js       27.5 kB
                                 ├ chunks/fd9d1056-e84ae5c7993df4a6.js  50.9 kB
                                 ├ chunks/main-app-98eb39b52ca403c0.js  230 B
                                 └ chunks/webpack-968d608236c2cc00.js   1.73 kB
2023-10-30T13:02:22.944Z [INFO]: ○  (Static)  automatically rendered as static HTML (uses no initial props)
                                 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
2023-10-30T13:02:22.979Z [INFO]: # Completed phase: build
2023-10-30T13:02:22.980Z [INFO]: ## Build completed successfully
2023-10-30T13:02:22.981Z [INFO]: # Starting caching...
2023-10-30T13:02:22.990Z [INFO]: # Creating cache artifact...
2023-10-30T13:02:23.112Z [INFO]: # Created cache artifact
2023-10-30T13:02:23.112Z [INFO]: # Uploading cache artifact...
2023-10-30T13:02:23.661Z [INFO]: # Uploaded cache artifact
2023-10-30T13:02:23.661Z [INFO]: # Caching completed
2023-10-30T13:02:23.666Z [INFO]: # No custom headers found.
2023-10-30T13:02:41.421Z [INFO]: # Starting environment caching...
2023-10-30T13:02:41.588Z [INFO]: # Environment caching completed
Terminating logging...

But when opening the app (using its domain) there is an error, the site does not appear in Chrome or Safari and in the AWS logs I get the reference error shown just above.

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

I am using AWS Amplify to host my NextJS app; using a custom build image: public.ecr.aws/docker/library/node:20.9.0

NextJS 14
Node 20.9.0

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

I tested using the latest canary version, the same error occurs. I guess the problem comes from AWS Amplify and not NextJS but I am completely stuck and tried everything I could with my fairly limited skills as I am still learning how all of this works.

I’d be happy to add more information if needed, thanks a lot in advance !

Here are my AWS build specification (amplify.yml):

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - node -v
        - npm install
        - npm ci
    build:
      commands:
        - node -v
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 4
  • Comments: 17 (3 by maintainers)

Most upvoted comments

I wish I knew what % of projects measured by revenue hosted by Amplify were NextJS projects. Always feels like we are swimming up-river with NextJS on Amplify.

@binary-blazer Thanks for your answer ! When you say upgrading the NodeJS version to v18; are you using a custom build image with that version, or something else ?

nvm

Actually, there are 2 problems, since Next 14 it is necessary to use node>=18.17 for both build and runtime. So even assuming we could get node >= 18.17 at build time via amplify, then there would be problems at runtime, e.g. in everything behind the scenes using lambdas as currently even lambdas still use node 16.