ReadableStream object could not be cloned when trying to use stream as a mocked response body

This issue originated from the earlier issue: https://github.com/mswjs/msw/issues/156

If we need msw to support SSE, then we need to make the code work:

export const worker = setupWorker(
  rest.get('/sse', (req, res, ctx) => {
    return res(
      ctx.status(200)
    , ctx.set('Content-Type', 'text/event-stream')
    , ctx.body(sse(function* () {
        yield 'message1'
        yield 'message2'
      }))
    )
  })
)

function sse(gfn) {
  let iter
  return new ReadableStream({
    start() {
      iter = gfn()
    }
  , pull(controller) {
      controller.enqueue(`data: ${iter.next().value}\n\n`)
    }
  })
}

Browser:

[MSW] Request handler function for "GET http://localhost:8080/sse" has thrown the following exception:

DOMException: Failed to execute 'postMessage' on 'MessagePort': ReadableStream object could not be cloned.
(see more detailed error stack trace in the mocked response body)

Node.js:

TypeError: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of ReadableStreamTypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of ReadableStream

      at ClientRequestOverride.<anonymous> (node_modules/node-request-interceptor/src/interceptors/ClientRequest/ClientRequestOverride.ts:216:34)
      at step (node_modules/node-request-interceptor/lib/interceptors/ClientRequest/ClientRequestOverride.js:33:23)
      at Object.next (node_modules/node-request-interceptor/lib/interceptors/ClientRequest/ClientRequestOverride.js:14:53)
      at fulfilled (node_modules/node-request-interceptor/lib/interceptors/ClientRequest/ClientRequestOverride.js:5:58)

_Originally posted by @BlackGlory in https://github.com/mswjs/msw/issues/156#issuecomment-739362584_

[kettanaito]

One thing to mention: there is no ReadableStream API in Node. There’s Readable, which is a different thing. There are also some transformation utils like Readable.toWeb() in the latest versions of Node but I have no confirmation of whether they construct an actual window.ReadableStream-compatible API.

Generally, we’ve adopted ReadableStream internally but MSW doesn’t have support for ReadableStream as a mocked response body yet. Even this internal change seems to have broken a thing or two for some browsers, as the request is pending indefinitely in some cases (see #1325, #1324).

The way we’ve implemented readable streams internally is:

1. Construct new Response(mockedResponse.body) and then read it as response.body.getReader().
2. Send all read chunks to the worker via messageChannel.postMessage().
3. On the worker’s side, construct another readable stream and manually pipe the incoming messages to that stream’s queue: https://github.com/mswjs/msw/blob/6c6e1193327ba6c7d55826fd7997ddc9f1fb4fd5/src/mockServiceWorker.js#L351-L355

This effectively means that we’re constructing two streams and stitching them together.

I’ve just tried sending a stream via transport of postMessage but while that works fine in Chrome, browsers like Firefox and Safari refuse to clone a ReadableStream. This is despite the spec describing Transferable as various data types, including ReadableStream.

I suspect that the pending request issue is caused by the operation channel (BroadcastChannel) that we create internally to bind the chunks transfer to a specific request:

https://github.com/mswjs/msw/blob/6c6e1193327ba6c7d55826fd7997ddc9f1fb4fd5/src/mockServiceWorker.js#L234-L239

If this channel gets corrupted/destroyed, the internal stream in the worker will pend forever.

[kettanaito]

Released: v0.43.0 🎉

This has been released in v0.43.0!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.