Next.js 14.2.0 - Your target environment does not appear to support 'async/await'

[mbernardes19]

Summary

After updating from 14.1.4 to 14.2.0, I'm getting this warning during build time for every page that has a top-level await:

./pages/cart.tsx
The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

It doesn't stop the build or affect the page rendering, but just wanted to know what's causing this and how can I fix the issue that's generating this warning.

I saw that this warning was also identified here: #61551

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:19:22 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8112
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.17.1
  npm: 9.6.7
  Yarn: 1.22.22
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.0 // Latest available version is detected (14.2.0).
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.8.3
Next.js Config:
  output: N/A

Example

No response

[Legonois]

Having this exact same issue! Any solution?

[albe]

tsconfig

{
  "compilerOptions": {
    "target": "es2023",
    "lib": [
      "dom",
      "dom.iterable",
      "ES2023",
      "ESNext.Object"
    ],
    "module": "esnext",

next.config

    /** @param {import('webpack').Configuration} config */
    webpack: (config, { isServer }) => {
        // Attempted fix for "The generated code contains 'async/await' because this module is using "topLevelAwait"."
        // NOTE: Doesn't change anything really
        /*if (config.target instanceof Array && config.target.includes("es5")) {
            config.target = ["web", "es6"];
        } else if (typeof config.target === "string" && config.target.startsWith("node")) {
            config.target = "node22.5";
        }*/
        config.experiments = { ...config.experiments, topLevelAwait: true };

        return config;
    },

Still the same warning pops up with Next 14.2.x while everything is perfectly fine with 14.1.x

[lgenzelis]

Having the same issue, even in a newly started project. Simply adding a top level await to a project using "next": "15.0.3" triggers this warning.

[bdrtsky]

I have this warning when I use server component in client component

[am-unklown]

Probably its related to Edge runtime + middleware / instrumentation.ts / external libs.
Check #64792 (and specifically this comment).

Edge runtime is a vercel thing. Middlewares have to be run on it. Not all node features are supported there (including top level await) and not all libs will work. There are discussions about allowing users to use nodejs runtime instead (1, 2, 3).

(Sidenote: issue is not related to tsconfigs target probably. Not sure but webpack may not consider that target when builds your app at all.)

===

In my case I called func inside instrumentation.ts. That func uses prisma (and inits it if not yet) and produces log entries like yours (about not supported top level async await). Placing that func in app route (just for testing) does not produce log warns.

So i wrapped that function like this (according to docs):

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./my-func-which-causes-warnings-about-top-level-await')
  }
}

And log warning dissapears. In case you face such problem in middleware I assume this will not work as only edge runtime available there.

[Artistry449]

it worked! what is side effect of using it in production?