-
Notifications
You must be signed in to change notification settings - Fork 27.1k
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
'SomeComponent' cannot be used as a JSX component. #42292
Comments
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 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 This fix might come from the next typescript plugin I think, not sure. |
Thanks |
Thanks @icyJoseph
|
This particular error is hardcoded in TypeScript. The React team is working with the TypeScript team to resolve this. For now you can use the recommendation above 👍 |
Just added a few notes about this workaround to the beta docs as well, thank you! |
Is there a public issue/PR on the TypeScript repo where that work can be followed? |
The My guess is that the Promise is not resolved at the time of rendering. Hence, the error. If this is so, any workarounds until it is fixed. |
To my understanding server components are only available in the new app/ folder not pages/ so that would be the cause of your issue. |
Ah Yes. I was not aware of it. In a sandbox I was able to reproduce the above error which I was expecting in |
You only use async component inside app folder and server component. |
The issue may have been introduced to your project via some other packages' peer dependency. If you have a .tsconfig file, Add following to compilerOptions: "paths": { |
Don't know why, but I am using |
Same here, I am passing a SSC as a child to a CSC. Both are wrapped in a SSC as mentioned in the Nextjs Docs.
|
I'm using NextJS 13, the error still persists if you pass async server components. But |
@bgdnvk Mine is a render-time error, so this doesn't get mine working. |
I upgraded my package types: |
Didn't work for me. |
didn't work either :( |
Didn't work for me, on most recent for each as well. |
I'm on Next.js 13 and I've found two workarounds: First one is using a const:
Second one is using
|
The problem with |
Here is a wonky workaround which gets around the issue without losing all type safety for your incoming props. 👇🏼 type UserPostsProps = {
userId: number
}
async function UserPosts({ userId }: UserPostsProps) {
const userPosts: any = await fetch(
`https://jsonplaceholder.typicode.com/posts?userId=${userId}`
).then(res => res.json())
return (
<ul>
{userPosts.map((post: any) => (
<li>{post.title}</li>
))}
</ul>
)
}
// As a temporary work around, we can override the type so that it returns a JSX.Element instead of a Promise
const _UserPosts = UserPosts as unknown as (props: UserPostsProps) => JSX.Element
export { _UserPosts as UserPosts } |
Didn't expect this to work, but nuking node_modules and pnpm-lock.yarn and re-installing actually fixed the issue. |
In my case that was enough 💪
|
Finally worked:
No error. :') |
This is what nextjs doc says: https://nextjs.org/docs/app/building-your-application/configuring/typescript) |
It worked with ts: 18 and react/types: 18 |
Unfortunately, upgrading typescript solves the "cannot be used as a JSX component" error, but it will break eslint for me with eslint-config-next in next/core-web-vitals. |
This guide fixed my issue |
This guide along with this link fixed my issue - https://nextjs.org/docs/app/building-your-application/configuring/typescript |
I found this issue will occur again if upgrade to 😕
but below works
|
What react verrsion? I am on latest and still got errors from these versions. |
|
For who wants to test an
|
Based on https://twitter.com/sebsilbermann/status/1664356039876124672 I created a new Next.js application using create-next-app and was able to verify it works now.
async function MyComponent() {
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
return <h1>Hello World</h1>;
} And added: <div className={styles.center}>
<MyComponent />
</div> Great work @eps1lon!
The latest version of React (specifically for server components) supports async functions as JSX, TypeScript just wasn't up to date with that yet. |
@timneutkens i am still seeing an error with an explicit see #42292 (comment) |
|
hmm, |
The only bug we need to fix in types/react is that async is only for experimental when it's already available in canary. |
Bumping I also tried explicitly typing the return of my component to |
If you are using the In my case, I was using the |
More background on the |
@jacobsfletch |
I solved this problem with following steps (if you are using VSCode):
Source: https://stackoverflow.com/a/65151679/3317931 |
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. |
Verify canary release
Provide environment information
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.
Expected Behavior
probably not give an error when using async components
Link to reproduction
no link
To Reproduce
The text was updated successfully, but these errors were encountered: