Type 'Promise<Element>' is not assignable to type 'ReactNode' after upgrading nextjs
Unanswered
Fire ant posted this in #help-forum
Fire antOP
After upgrading from 13.5.3 to 13.5.6 , I got Type 'Promise<Element>' is not assignable to type 'ReactNode' error.
Before upgrade it works fine, no error.
In VSCode it says:
page.tsx
and my component
Search.tsx
Maybe this is skill issue, but it's been 2 days i still can't find solution for this.
Before upgrade it works fine, no error.
In VSCode it says:
'RelatedSearch' cannot be used as a JSX component.
Its type '({ searchParams }: RelatedSearchProps) => Promise<Element>' is not a valid JSX element type.
Type '({ searchParams }: RelatedSearchProps) => Promise<Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'Promise<Element>' is not assignable to type 'ReactNode'page.tsx
<RelatedSearch searchParams={{ q: searchParams.search_query }} /> and my component
Search.tsx
async function RelatedSearch({ searchParams }: RelatedSearchProps) {
const apiUrl = process.env.API_URL as string;
const data = await fetch(`${apiUrl}/s?q=${searchParams.q}`);
const response = await data.json();
return (
<>
{response.search.length > 0 && (
<>
<div className="related-search-title">Related searches</div>
<div className="related-search grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 sm:grid-rows-4 justify-center mx-auto">
{response.search.map((searchItem: string, index: number) => (
<Link
key={index}
href={`/result?search_query=${searchItem.replace(/ /g, '+')}`}
>
<div className="px-2 py-2 sm:pb-3 md:pb-3 flex justify-center bg-shell-holder border border-gray-200 hover:bg-gray-300 rounded-full">
<span className="related-text text-sm">{searchItem}</span>
</div>
</Link>
))}
</div>
</>
)}
</>
);
}Maybe this is skill issue, but it's been 2 days i still can't find solution for this.