Skip to content

Bug: [Flight] renderToReadableStream with Suspense never resolves in some circumstances #23113

Closed
@jplhomer

Description

@jplhomer

React version: 0.0.0-experimental-0cc724c77-20211125 (and main)

Steps To Reproduce

  1. Build the current version of React in main
  2. open fixtures/flight-browser/index.html
  3. Take note that the model never resolves, and the HTML in the fixture is never updated:

Screen Shot 2022-01-14 at 3 10 58 PM

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 using response.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 the Title component in the fixture, everything works correctly.
  • If you add add a console.log after let blob = await responseToDisplay.blob();, it never logs. This means that response.blob() is hanging.
  • If you replace the contents of display with renderResult(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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions