Cloudflare Suspense streaming doesn't work with React 19

[gavriguy]

Hi,
It seams that trying to use Suspense as mentioned in the docs - https://reactrouter.com/how-to/suspense#with-react-19
doesn't work with Cloudfalre. The response waits to the NonCriticalUI to resolve on the server before rendering the full page.

import * as React from "react";
import { Await } from "react-router";
import type { Route } from "./+types/my-route";

export async function loader({}: Route.LoaderArgs) {
  // note this is NOT awaited
  let nonCriticalData = new Promise((res) =>
    setTimeout(() => res("non-critical"), 5000)
  );

  let criticalData = await new Promise((res) =>
    setTimeout(() => res("critical"), 300)
  );

  return { nonCriticalData, criticalData };
}

export default function MyComponent({
  loaderData,
}: Route.ComponentProps) {
  let { criticalData, nonCriticalData } = loaderData;

  return (
    <div>
      <h1>Streaming example</h1>
      <h2>Critical data value: {criticalData}</h2>

      <React.Suspense fallback={<div>Loading...</div>}>
        <NonCriticalUI p={nonCriticalData} />
      </React.Suspense>
    </div>
  );
}

function NonCriticalUI({ p }: { p: Promise<string> }) {
  let value = React.use(p);
  return <h3>Non critical value {value}</h3>;
}

[brookslybrand]

@gavriguy I think this might be some issue with wrangler since it only fails when I run npm run start. It does work properly when I run npm run dev and when I deploy to cloudflare (not I am using the template from #6, not sure if it resolved something)

I'm not sure if there's something we can do in our template to fix this issue, so I'll leave it open for now