On defering data the steam closes early

[Eiley2]

I was trying to implement this using Bun, but when navigating to a page that uses deferred data, the request is closed prematurely and the stream never reaches the client. At first, I thought it was an issue with Bun, but I tested it with Node and encountered the same problem.

You can reproduce this issue using the latest version of React Router by following the installation steps in the repository.

Just in case it's relevant, here's my package.json:

{
  "name": "bun-hono-bug",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc"
  },
  "dependencies": {
    "@react-router/node": "^7.5.1",
    "@react-router/serve": "^7.5.1",
    "isbot": "^5.1.17",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.5.1",
    "react-router-hono-server": "*"
  },
  "devDependencies": {
    "@react-router/dev": "^7.5.1",
    "@tailwindcss/vite": "^4.0.0",
    "@types/node": "^20",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "react-router-devtools": "^1.1.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.2",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.4"
  }
}

and whatver route with a deferred data

import { Suspense } from "react";
import { Await, useLoaderData } from "react-router";
import { Welcome } from "../welcome/welcome";
import type { Route } from "./+types/home";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export async function loader() {
  return {
    data: new Promise((resolve) => {
      setTimeout(() => {
        resolve({ message: "Hello, world!" });
      }, 5000);
    }),
  };
}

export default function Home() {
  const { data } = useLoaderData<typeof loader>();
  return (
    <>
      <Welcome />
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={data}>{(data) => <div>{data.message}</div>}</Await>
      </Suspense>
    </>
  );
}

the bug is

Error: The destination stream closed early.
    at PassThrough.<anonymous> (/home/erik/Personales/bun-hono-bug/node_modules/react-dom/cjs/react-dom-server.node.development.js:7662:24)
    at PassThrough.emit (node:events:519:28)
    at emitCloseNT (node:internal/streams/destroy:147:10)
    at processTicksAndRejections (node:internal/process/task_queues:81:21)

[Eiley2]

Also in previous versions, it doesn't stream the response at all, it stales the connection until the promise has been resolved. Idk if its something in my config ?

[Eiley2]

Also, if I run the example from https://github.com/rphlmr/react-router-hono-server/blob/main/examples/bun/simple-bun-runtime/ and go to the defer route, it says this:

I'm starting to think there's something wrong with my install lol, any way i can confirm this?

<-- GET /defer
--> GET /defer 200 3ms
8134 |         0 !== request.abortableTasks.size &&
8135 |           console.error(
8136 |             "There was still abortable task at the root when we closed. This is a bug in React."
8137 |           ),
8138 |         (request.status = CLOSED),
8139 |         destination.end(),
              ^
TypeError: undefined is not an object
      at end (16:8)
      at flushCompletedQueues (/home/erik/Personales/will/node_modules/react-dom/cjs/react-dom-server.bun.development.js:8139:21)
      at performWork (/home/erik/Personales/will/node_modules/react-dom/cjs/react-dom-server.bun.development.js:7667:9)

If it's worth something, when I start the dev server, it says:

Failed to find Response internal state key

  VITE v5.4.18  ready in 422 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
loading server
🚧 Dev server started

UPDATE:

Looks like that is some error from the entry.server.tsx because, when you don't add it, it works fine, but it doesn't stream the deferred value and just waits for the promise, but if you add the custom entry.server.tsx, it starts to fail.

[rphlmr]

How did you generate your entry server file?

I will take a look too

[Eiley2]

How did you generate your entry server file?

I will take a look too

Thanks in advance for your incredible work!

For bun, it's the same from the README.

[afdhali]

I havent any problem with this template and bun. please review my implementation using this template rr7-honobun

[Eiley2]

I havent any problem with this template and bun. please review my implementation using this template rr7-honobun

Sure. It's private tho

[devlzcode]

How did you generate your entry server file?

I will take a look too

I have this issue with using the same entry.server.tsx in the examples

[afdhali]

"How about using TanStack Query? It can fetch the deferred data, though in this case I think it only works on the client side. Just for information, TanStack Query can now leverage Suspense on the server side / server components. However, the downside is that we would need to install an additional package called 'TanStack' 😂"

[afdhali]

I just implemented deferring case with RTKQ, please check it out rr7-honobun-deferr

[herkulano]

I'm facing the same issue with both Bun and Node in the latest release v2.17.0

[rphlmr]

@herkulano can you share your entry.server?

Depending on how long your defer takes, RR will close after a delay (5 seconds by default).

The const is named streamTimeout (entry.server).

If you don't have any entry files (default behaviour), you can generate them with npx react-router reveal

[rphlmr]

Some changes in React 19 alter the entry.server.tsx imports at build time. I'm working to fix that ASAP. Sorry for the inconvenience. (#147 to test)