Promise<ReactNode> return type annotation not working with react 19 types

[stefanprobst]

Summary

i am still unclear how to correctly type the return type of async components in react 19.

the following snippet (see the example) errors:

import type { ReactNode } from "react";

function Page() {
  // 'PageContent' cannot be used as a JSX component.
  // Its type '() => Promise<ReactNode>' is not a valid JSX element type.
  //   Type '() => Promise<ReactNode>' is not assignable to type '(props: any) => ReactNode'.
  //     Type 'Promise<ReactNode>' is not assignable to type 'ReactNode'.
  //       Type 'Promise<ReactNode>' is not assignable to type 'Promise<AwaitedReactNode>'.
  //         Type 'ReactNode' is not assignable to type 'AwaitedReactNode'.
  //           Type 'Promise<AwaitedReactNode>' is not assignable to type 'AwaitedReactNode'.ts(2786)
  return <PageContent />
}

async function PageContent(): Promise<ReactNode> {
  return <div>Check</div>
}

---

however, when using Promise<Awaited<ReactNode>> instead of Promise<ReactNode> it seems to work, but i have not seen that documented anywhere. is that the recommended approach? (maybe @eps1lon has more insight here? thanks!)

Additional information

No response

Example

https://github.com/stefanprobst/issue-react-types

[eps1lon]

when using Promise<Awaited> instead of Promise it seems to work

This is currently the only workaround. Either microsoft/TypeScript#59111 gets addressed or we fix it at the @types/react level. It's a bit more involved to fix it before React 19 is stable so I'm not going to pursue it until then. Others are free to contribute. I added tests as a starting point: DefinitelyTyped/DefinitelyTyped#69970

[stefanprobst]

thank you!

[lacymorrow]

Encountering this issue with next@15

[Netail]

Add /// <reference types="react/experimental" /> to your app's global types

RE; facebook/react#28718 (comment)

[booi-dev]

Did you find a solution?