I’m migrating my next.js app from Pages Router to App Router, so as to utilize features like Streaming. The next.js version I’m using is 13.4.0, as App Router has been marked stable there.

This snippet is from one of the Server components:

<Suspense
    fallback={
          <div> Loading div </div>
    }>
      <StreamComponent deviceWidth={deviceWidth as number} />
</Suspense>

StreamComponent.tsx:

export default async function StreamComponent(props: PocMerchListProps) {
    const { deviceWidth } = props;
    const response = await getDataFromServer();
    const formattedResponse = getFormattedResponse(response);

    const topData = formattedResponse.slice(0, 2);
    const bottomdata = formattedResponse.slice(2);
    return (
        <div>
            <TopComponent
                data={topData}
                deviceWidth={deviceWidth as number}
            />
            <BottomComponent
                data={bottomdata}
                deviceWidth={deviceWidth as number}
            />
        </div>
    );
}

In the Server Component, I’m getting this TS error:

‘StreamComponent’ 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

While I understand the reason for this error, but then this would come whenever streaming is used, and hence the build will fail because of the TS error?!

Surprisingly, the build is not failing if next.js version >= 13.4 (when app router is stable). For other versions, lets say 13.3.0, the same TS error fails the build.

Regardless of the version, how do I fix this error?