Next.js Discord

Discord Forum

Type 'Promise<Element>' is not assignable to type 'ReactNode' after upgrading nextjs

Unanswered
Fire ant posted this in #help-forum
Open in Discord
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:
'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.

0 Replies