Top-level await causes the client component to report an error. Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

[Innei]

Link to the code that reproduces this issue

https://github.com/Innei/nextjs-top-level-reproduction

To Reproduce

1. clone this repo
2. run dev
3. open dev url

---

Write a client component like this.

'use client'

import type { FC } from 'react'

const highlighter = await Promise.resolve([]) // with a top level await any value


export const ShikiHighLighter: FC<{}> = (props) => {
  console.log(highlighter)
  return null
}

and import this in root component.

// page.tsx
import Image from 'next/image'
import { ShikiHighLighter } from '../../components/shiki' // only import also lead to all app crash

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ShikiHighLighter />
    </main>
  )
}

Current vs. Expected behavior

current:
Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

Expected: DONT crash

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:31:00 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6020
Binaries:
  Node: 20.8.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.14.1
Relevant Packages:
  next: 14.1.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

App Router

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

next dev (local)

Additional context

No response

[maxratajczak]

Yep, have this issue too. I'm using top level await to lazy import an object from another file and I get the same error.

[maxratajczak]

FYI this issue seems to only happen in the app router with server and client components. When I switched to the pages router the issue doesn't happen. Looks like I won't be using app router any time soon.

[Innei]

There are two ways to fix this issue.

1. Only use top-level await in server-only component.
2. use await in async component.

[ezequiel]

It was mentioned in #64508 that @gnoff is looking into this error? 😮