Invalid state: chunk ArrayBuffer is zero-length or detached React 18 renderToReadableStream

[gffuma]

Hi,

I don't know if this bug is related to React or is an issue with miniflare.
React 18 now support a new API for server side rendering in a worker context, this is the sample code:

import ReactDOMServer from 'react-dom/server'

async function handler() {
  const stream = await ReactDOMServer.renderToReadableStream(
    <div>Hello</div>
  )
  return new Response(stream, {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  })
}

addEventListener('fetch', async (event) => {
  event.respondWith(handler(event.request))
})

The first request is ok, the second time you get:

TypeError: Invalid state: chunk ArrayBuffer is zero-length or detached
    at new NodeError (node:internal/errors:371:5)
    at ReadableByteStreamController.enqueue (node:internal/webstreams/readablestream:1109:13)
    at writeChunk (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:81:1)
    at flushSubtree (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6312:1)
    at flushSegment (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6334:1)
    at flushSubtree (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6307:1)
    at flushSegment (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6334:1)
    at flushSegment (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6387:1)
    at flushSubtree (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6307:1)
    at flushSegment (/Users/fuma/projects/snext/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6334:1) {
  code: 'ERR_INVALID_STATE'
}

[sebmarkbage]

Which version of React 18 are you using? This might be a bug in latest React RC. Are you using any ReadableStream polyfills to make this work?

[gffuma]

I was running 0.0.0-experimental-05c283c3c-20220302.
No i do this test with no polyfills ReadableStream are built-in in worker (but i don't know how miniflare provide this).
https://developers.cloudflare.com/workers/runtime-apis/streams/readablestream/

I will re-try with the new version of React and let you know i can also try on a real Cloudflare instance.

[sebmarkbage]

I filed a bug upstream in React. That's really the cause of the bug.

[gnoff]

@gffuma the issue should be fixed on main with commit facebook/react@e09518e

[gffuma]

Once on experimental tag i will retry. In the meantime thanks for the awesome work 🙏 🙏 🙏