Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Suspense components rendered by renderToReadableStream() cause render abort when served with Bun #32159

Open
jmuzina opened this issue Jan 22, 2025 · 0 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@jmuzina
Copy link

jmuzina commented Jan 22, 2025

React version: 19.0.0

Steps To Reproduce

  1. Install Bun and Node
  2. Clone my reproduction repo
  3. Install dependencies with Bun: bun install
  4. Run React server with Node: bun run ssr:node. Open the app and see that the suspended Button component resolves after 2 seconds and no errors are thrown in the serverside or clientside consoles.
  5. Run React server with Bun; bun run ssr:bun. Open the app and see that the Button component remains suspended after 2 seconds, is resolved in the serverside console but not the clientside console, and the following error is thrown in the server console:
8169 |   try {
8170 |     var abortableTasks = request.abortableTasks;
8171 |     if (0 < abortableTasks.size) {
8172 |       var error =
8173 |         void 0 === reason
8174 |           ? Error("The render was aborted by the server without a reason.")
                   ^
error: The render was aborted by the server without a reason.
      at abort (/home/jmuzina/software/work/canonical/repos/react-repro/node_modules/react-dom/cjs/react-dom-server.bun.development.js:8174:13)
      at cancel (/home/jmuzina/software/work/canonical/repos/react-repro/node_modules/react-dom/cjs/react-dom-server.bun.development.js:8262:17)
      at close (3:17)
  1. Cause an app re-render by clicking the "Increment" button. See that the lazy button is resolved after 2 seconds (the "click me" button is rendered and the clientside log reports the lazy component has been resolved).

Link to code example: https://github.com/jmuzina/react-repro

The current behavior

  • Node can stream responses compatible with React.Suspense by using react-dom.renderToPipeableStream().
  • Bun can stream responses with react-dom.renderToReadableStream(), but any Suspense boundaries are not resolved until after a re-render, and the first render of a Suspense boundary is aborted on the serverside with no reason.

The expected behavior

Node and Bun can both stream responses compatible with React.Suspense.

@jmuzina jmuzina added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jan 22, 2025
@jmuzina jmuzina changed the title Bug: Suspense components rendered by Bun renderToReadableStream() cause render abort Bug: Suspense components rendered by renderToReadableStream() cause render abort when served with Bun Jan 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

1 participant