async error in client component
Answered
American black bear posted this in #help-forum
American black bearOP
hello, im having a page component with async for data fetch, im importing a shadcn form component which is client on it, im not using async in the form component but it gives me the error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
im passing the fetched data from the page component to the form component
Form : https://gist.github.com/Enkai0110/f4207241bb01bb65675e36cc5c9e988c
page : https://gist.github.com/Enkai0110/5309d0b3c6f812236c384173a3a0dd06
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
im passing the fetched data from the page component to the form component
Form : https://gist.github.com/Enkai0110/f4207241bb01bb65675e36cc5c9e988c
page : https://gist.github.com/Enkai0110/5309d0b3c6f812236c384173a3a0dd06
Answered by Ray
it will become client component when it get imported to another client component
9 Replies
@Ray could you show the code on `@/components/heading`?
American black bearOP
oh, just relized im using an uneccesary async in there, but im not wrapping it with "use client" why would error happen
interface headingProps {
title: string;
description: string;
}
const Heading: React.FC<headingProps> = async ({ title, description }) => {
return (
<div>
<h1 className="text-3xl font-bold tracking-tight">{title}</h1>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
);
};
export default Heading;@American black bear oh, just relized im using an uneccesary async in there, but im not wrapping it with "use client" why would error happen
typescript
interface headingProps {
title: string;
description: string;
}
const Heading: React.FC<headingProps> = async ({ title, description }) => {
return (
<div>
<h1 className="text-3xl font-bold tracking-tight">{title}</h1>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
);
};
export default Heading;
it will become client component when it get imported to another client component
Answer
@Ray it will become client component when it get imported to another client component
American black bearOP
i see thx a lot, how can i close this ?
that was a stupid problem lol
@American black bear i see thx a lot, how can i close this ?
right click an answer > application > mark solution
American black bearOP
@Raysorry, but i just remembered something, is it okay to make an async function inside a client function ? im doing it rn but no problems seems to happen
@American black bear <@743561772069421169>sorry, but i just remembered something, is it okay to make an async function inside a client function ? im doing it rn but no problems seems to happen
yes you can use async function in client component
American black bearOP
thx