Typescript error with Next13, Monorepo (turbo repo), and Async components

[dannytlake]

Link to the code that reproduces this issue or a replay of the bug

https://github.com/dannytlake/next-13-turbo-async-bug

To Reproduce

Note, the reference repo was created by running pnpm dlx create-turbo@latest

1. in VSCode, clone repo
2. Install dependencies
3. In apps/web/app/page.tsx, the async component AsyncComponent should be causing a typescript error on line 62.

'AsyncComponent' 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, keyts(27
When setting VSCode to use the workspace typescript version by running TypeScript: Select TypeScript Version... and choosing workspace version of 5.2.2, the error persists.

Current vs. Expected behavior

When building a nextjs application inside a monorepo, there should be no typescript error when using an async component inside a RSC component in the App Router

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 20.6.0: Wed Nov 10 22:23:07 PST 2021; root:xnu-7195.141.14~1/RELEASE_X86_64
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.6.6
    Relevant Packages:
      next: 13.4.20-canary.18
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

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

App Router, TypeScript (plugin, built-in types)

Additional context

This doesn't seem to be related specifically to VSCode, I had folks open the repo in webstorm as well and they experienced the same issue.

[timmeade]

I just updated a working turbo repo from 13.4.3 i think to 13.5.3 and now almost every shadcn component is kicking this out.

'Dialog' cannot be used as a JSX component.
  Its type 'FC<DialogProps>' is not a valid JSX element type.
    Type 'FunctionComponent<DialogProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.

There are a TON of them.

[darcy-vitacca]

upgrade @types/react fixed this

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.