'SomeComponent' cannot be used as a JSX component.

Verify canary release

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

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.12.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.1-canary.4
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Any components are producing IDE error but builds successfully.

'SomeComponent' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key `ts(2786)`

Expected Behavior

probably not give an error when using async components

Link to reproduction

no link

To Reproduce

// ~/component/SomeComponent.tsx

export default async function SomeComponent() {
    let categories: any = await getCategories()
    return ...
}

[icyJoseph]

I think a fix is upcoming, but pretty much the issue is that TypeScript doesn’t understand async components… It always expects JSX as child, not Promise<JSX>.

Many are type casting the component and exporting that type casted version… I think it might be better to do:

import { RSCList } from "../../../components/RSCList";

export default function Page({ params }: { params: { id: string } }) {
  return (
    <div>
      Order: {params.id}
      <div>
        {/* @ts-expect-error Server Component */}
        <RSCList />
      </div>
    </div>
  );
}

When the types are fixed, the @ts-expect-error directive will complain that it is unused…

This fix might come from the next typescript plugin I think, not sure.

[leerob]

Just added a few notes about this workaround to the beta docs as well, thank you!