Description
React version: 0.0.0-experimental-0cc724c77-20211125 (and main
)
Steps To Reproduce
- Build the current version of React in
main
open fixtures/flight-browser/index.html
- Take note that the model never resolves, and the HTML in the fixture is never updated:
The current behavior
The model never resolves, and the data is never rendered to the DOM.
Other findings
- If you
console.log
each chunk individually usingresponse.getReader().read() ...
, you'll see chunks written, but some are duplicates, and some are out of order. In the reader,done
never gets called. - If you remove the Suspense
read()
from theTitle
component in the fixture, everything works correctly. - If you add add a
console.log
afterlet blob = await responseToDisplay.blob();
, it never logs. This means thatresponse.blob()
is hanging. - If you replace the contents of
display
withrenderResult(ReactServerDOMReader.createFromReadableStream(responseToDisplay.body))
, everything works correctly.
We're seeing this same behavior in Hydrogen: Shopify/hydrogen#463 both when calling renderToReadableStream
and passing that to Response
in a Workers runtime, and when calling renderToReadableStream
and consuming that stream in an SSR context. The chunks are written out of order and duplicated, and the response never resolves.
It's very odd that the automated tests in react-dom-server-webpack/.../ReactFlightDOMBrowser-test.js
do not fail under these same conditions. I'm trying to pinpoint the conditions where this happens — e.g. is it when a ReadableStream gets sent through a Response.body
? — but I can't nail it down yet.
The expected behavior
The flight model resolves when using renderToReadableStream
with Suspense, and the data is rendered to the DOM.