Invalid state: chunk ArrayBuffer is zero-length or detached React 18 renderToReadableStream
See original GitHub issueHi,
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'
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:5
Top Results From Across the Web
How to solve "Element type is invalid" for my React app?
It seems you can not pass the state directly to the child component. You have two main ways to resolve that issue. First...
Read more >Using MoveBox with MediaPipe instead of VIBE - Microsoft/Microsoft ...
Audio does not work on iPhone Safari, 0, 2021-10-29, 2022-08-18 ... Invalid state: chunk ArrayBuffer is zero-length or detached React 18 ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I filed a bug upstream in React. That’s really the cause of the bug.
Once on experimental tag i will retry. In the meantime thanks for the awesome work 🙏 🙏 🙏