Error next 13, typescript with fetching data inside async component

Question

HERE ERROR IMAGE

export const Filter = async (): Promise<JSX.Element> => { const { data: categories } = await api.get('/categories/') return ( <div className='w-full h-full relative'> <Container className='sticky top-[6rem] max-lg:col-span-2'> <div className='grid grid-cols-1 gap-6 max-h-[40rem] overflow-y-scroll overflow-hidden'> There is the problem i think <Container className='flex items-center flex-col'> <SmallHeading>Kategoria</SmallHeading> <ul className='grid grid-cols-1 gap-4 max-h-[25rem] overflow-y-scroll overflow-hidden w-full'> {categories.map(c => { return <CategoryItem key={c.id} href={c.name} name={c.name} image={c.img} isSmall={true} /> })} </ul> </Container> </div> </Container> </div> ) } 

'Filter' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement<any, any>': type, props, key

Help i'll try everythink

I tried what is in the code I gave above, I don't understand why such an error appear

Answer 1

I think you can use async components only in app directory. From the next13 docs

This new data fetching model is currently being developed by the React team. We recommend reading the support for promises React RFC which introduces async/await in Server Components and a new use() hook for client components. While you can try it out, it is not yet stable. We'll keep these docs updated to reflect the latest developments.

Warning: You can use async/await in layouts and pages, which are Server Components. Using async/await inside other components, with TypeScript, can cause errors from the response type from JSX. We are working with the TypeScript team to resolve this upstream. As a temporary workaround, you can use {/* @ts-expect-error Server Component */} to disable type checking for the component.

Answer 2

For people like me, who did not know "use client" also prevent fetch components.

Answer 3

I was having the same issue removing "use client" from the component solved the issue. so, don't use use async await in a client component in Next.js

Answer 4

Update eslint-config-next package to the latest version maybe resolve that issue