Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
jordykoppen opened this issue Nov 29, 2022 · 2 comments
Labels
bug Issue was opened via the bug report template. TypeScript Related to types with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).

Comments

@jordykoppen
Copy link

jordykoppen commented Nov 29, 2022

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:
image

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.

@jordykoppen jordykoppen added the bug Issue was opened via the bug report template. label Nov 29, 2022
@balazsorban44
Copy link
Member

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.

@balazsorban44 balazsorban44 added Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). TypeScript Related to types with Next.js. labels Nov 29, 2022
@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. TypeScript Related to types with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
Projects
None yet
Development

No branches or pull requests

2 participants