TypeError: Expected Sink code: "ERR_INVALID_THIS"

What version of Bun is running?

v1.1.8

What platform is your computer?

Darwin 23.4.0 arm64 arm

What steps can reproduce the bug?

Setup project:

{
  "name": "bug",
  "module": "src/bug-repro.tsx",
  "type": "module",
  "scripts": {
    "start": "bun src/bug-repro.tsx",
  },
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "react": "^19.0.0-rc-3f1436cca1-20240516",
    "react-dom": "^19.0.0-rc-3f1436cca1-20240516"
  }
}

import { renderToReadableStream } from 'react-dom/server'
import Bun, { sleep } from 'bun'
import { Suspense } from 'react'
import { Html } from './ui/html'

const ServerMessage = async () => {
  await sleep(500)
  return <p>Streamed in...</p>
}

export async function Page() {
  return (
    <Html title='Bug repro'>
      <Suspense fallback={<p>Loading...</p>}>
        <ServerMessage />
      </Suspense>
    </Html>
  )
}

Bun.serve({
  port: 8080,
  async fetch() {
    const stream = await renderToReadableStream(<Page />)
    return new Response(stream, {
      headers: { 'Content-Type': 'text/html' },
    })
  },
})

console.log('Starting server...')

Start the server.

Make a request:

Console error:

398 | function flushBuffered(destination) {
399 |   // Bun direct streams provide a flush function.
400 |   // If we don't have any more data to send right now.
401 |   // Flush whatever is in the buffer to the wire.
402 |   if (typeof destination.flush === 'function') {
403 |     destination.flush();
          ^
TypeError: Expected Sink
 code: "ERR_INVALID_THIS"

      at flushBuffered (/Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:403:5)
      at flushCompletedQueues (/Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:11360:7)
      at performWork (/Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:10986:7)
      at /Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:8889:14
      at scheduleWork (/Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:396:3)
      at pingTask (/Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:8888:5)
      at ping (/Users/tomatao/Code/study/discovery/bun-hono/node_modules/react-dom/cjs/react-dom-server.bun.development.js:8934:14)

Chunked response is cut off at the sleep

What is the expected behavior?

The server continues to stream the response after the asynchronous task

What do you see instead?

A response only containing the content before the async task and the call to destination.flush() inside React throwing an error related to ERR_INVALID_THIS

Additional information

No response

oven-sh / bun