next.js: Top level await (experimental) not working with Server Actions called from Client Components

I am also facing the same issue.

I have fixed this by doing the following:

1. Export an empty action from the same action file

// myAction.ts
'use server'
export async function initAction(){} // literally empty

export async function myNormalActionWithTopLevelAwait(){
  // DB Initialisation stuff or any logic depending on top level await libs.
 }

1. Run that empty action in a server component

// AnyServerComponentSuchAsLayout.tsx
import {initAction} from 'myAction.ts'

export const AnyServerComponentSuchAsLayout(){
 await initAction() // yes, this does nothing

  return (<MyPage />)
}

1. You can now use the action in your client component

// myClientComponent.tsx 
'use client'
import {myNormalActionWithTopLevelAwait} from 'myAction.ts'

export const MyClientComponent(){

/* You can now use your action here, without the issue of top level await */

}

It’s a dirty workaround, but until it gets fixed you can do that. I think that’s what @adrienbaron was suggesting.

I’m using SST and have the same problem and this worked as well (Thank you!), but it’s ugly as hell. Hope this gets fixed soon.

I have fixed this by doing the following:

1. Export an empty action from the same action file

// myAction.ts
'use server'
export async function initAction(){} // literally empty

export async function myNormalActionWithTopLevelAwait(){
  // DB Initialisation stuff or any logic depending on top level await libs.
 }

1. Run that empty action in a server component

// AnyServerComponentSuchAsLayout.tsx
import {initAction} from 'myAction.ts'

export const AnyServerComponentSuchAsLayout(){
 await initAction() // yes, this does nothing

  return (<MyPage />)
}

1. You can now use the action in your client component

// myClientComponent.tsx 
'use client'
import {myNormalActionWithTopLevelAwait} from 'myAction.ts'

export const MyClientComponent(){

/* You can now use your action here, without the issue of top level await */

}

It’s a dirty workaround, but until it gets fixed you can do that. I think that’s what @adrienbaron was suggesting.

I have tons of server actions depends on that one top level await (db connection), so I don’t think adding init functions for every one of them is not going to be easy. Is there any plans to solve this issue in soon future?

I am facing the same error when working with Server Actions on Next 14.0.4 and SST. Does Next.js have a plan to support top level await in server actions in the near time?

You shouldn’t use top level await entirely. The case for using it is to initialize DB connections, that could be done in the hook calling some init() function.

@mordechaim some libraries, like Drizzle ORM or SST use top level await in their own code though, the issue occurs because of this, not top level await in my own application code (I don’t have any). Top level await is a standard JS feature these days, and Next supports it in most places, so it not being supported in this case feels more like a bug 🤷‍♂️.

I’m also facing this issue. I think it’s quite an essential demand to use top level await for initializing databases. Hope Next.js could fix this problem sooner.

I have tons of server actions depends on that one top level await (db connection), so I don’t think adding init functions for every one of them is not going to be easy. Is there any plans to solve this issue in soon future?

One way to solve this, is to create one async function called eg. initActions and place every initializer inside, and only call initActions in eg. layout component. That way its easier to maintain IMO.

Here is the example code that I am using:

src/app/_initActions.ts

export const initActions = async () => {
  await initProductActions();
  await initCategoryActions();
  
  ...more initActions
};

and in my src/app/layout.tsx

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  await initActions();
  
  return (<App/>);
}

I have fixed this by doing the following:

1. Export an empty action from the same action file

// myAction.ts
'use server'
export async function initAction(){} // literally empty

export async function myNormalActionWithTopLevelAwait(){
  // DB Initialisation stuff or any logic depending on top level await libs.
 }

1. Run that empty action in a server component

// AnyServerComponentSuchAsLayout.tsx
import {initAction} from 'myAction.ts'

export const AnyServerComponentSuchAsLayout(){
 await initAction() // yes, this does nothing

  return (<MyPage />)
}

1. You can now use the action in your client component

// myClientComponent.tsx 
'use client'
import {myNormalActionWithTopLevelAwait} from 'myAction.ts'

export const MyClientComponent(){

/* You can now use your action here, without the issue of top level await */

}

It’s a dirty workaround, but until it gets fixed you can do that. I think that’s what @adrienbaron was suggesting.

This totally worked and fixed the issue I’ve been spending hours working around. Thanks!

This seems to be fixed with Next.js 14.0.4 🎉!

EDIT: Spoke too fast, I can still reproduce on Next.js 14.0.4.

For people that get stuck with this, I had the same issue using SST and Drizzle in a Server Action called client side (both have top level awaits). Fixed it by simply importing my actions file from a server component:

import { initActions } from "@/app/actions";
initActions();

export const initActions = () => {
  // This is a no-op function that is called on the server to initialize the actions module.
  // Otherwise, Next crashes on top level await when action is called from client component.
};

I’m assuming this loads the module already on the server and means the top level await doesn’t happen inside the code path that’s broken? Not sure if it will actually work when deployed on Lambda though 😅

Any development on this? We need to make all our forms request a REST API, because our DB library has top level awaits. Is there any known workaround?

I’d like to point out that we could use the instrumentation API to initialize DB connections. That may solve most use cases for top level await.

Ok, tried deploying on AWS using SST with this trick and it actually does work 👍, even when the lambda is cold, calling the action from the client doesn’t crash, as long as the action module has been imported from a server component somewhere.

Would still feel like this should be fixed in Next.js (as in top level await should work in Server Actions called from client components out of the box)

Please keep in mind that top level await is currently an experimental feature of Next.js, and we will be working on making it more stable in the future 👍