Typescript type issue: Server Component cannot be used as a JSX component. "Its return type 'Promise<Element>' is not a valid JSX component

[jordykoppen]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: 7.12.0
Relevant packages:
  next: 13.0.6-canary.2
  eslint-config-next: 13.0.5
  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

Builds fail whenever I introduce a Server Component into any page within the app directory. Whilst running the development server, the component works fine.

As of my understanding the following should be possible:

app/page.tsx

export default function Home() {
  return (
   <div>
     <User />
   </div>
  )
}

components/User.tsx

const fetchUser = () => fetch('example.com/user').res(() => json());

export default async function User () {
  const user = await fetchUser()

  return <div>{user.name}</div>
}

But instead, I'm receiving the following error in my editor and during local build:

Expected Behavior

The build shouldn't fail

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/jordykoppen/nextjs-13-server-component-issue

To Reproduce

• clone repo
• npm install
• npm run build

The build step should fail with the same error as above.

[balazsorban44]

Hi, this is an upstream issue, that will be fixed by microsoft/TypeScript#51328

The current recommendation is to use any or @ts-expect-error or a similar escape hatch.

[github-actions]

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