Next.js fetch with Suspense

Question

According to the docs, this is a typical fetch with Suspense pattern (a bit simplified).-

import { getArtist, getArtistAlbums, type Album } from './api';
 
export default async function Page({
  params: { username },
}: {
  params: { username: string };
}) {
  const albumData = getArtistAlbums(username);
 
 
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Albums promise={albumData} />
      </Suspense>
    </>
  );
}
 
// Albums Component
async function Albums({ promise }: { promise: Promise<Album[]> }) {
  // Wait for the albums promise to resolve
  const albums = await promise;
 
  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>{album.name}</li>
      ))}
    </ul>
  );
}

It actually works fine, but Visual Studio Code keeps complaining on

<Albums promise={albumData} />

due to

Its return type 'Promise<Element>' is not a valid JSX element.

Am I missing something obvious here? Is this a Lint error that I can somehow silence? Or maybe a versions issue? Any tip on the right direction is much appreciated.

Answer 1

The NextJS documentation states that this is a known TypeScript error that is being worked on. From the docs here:

Async Server Component TypeScript Error

An async Server Components will cause a 'Promise' is not a valid JSX element type error where it is used. This is a known issue with TypeScript and is being worked on upstream. As a temporary workaround, you can add {/* @ts-expect-error Async Server Component */} above the component to disable type checking for it.