`TypeError: Illegal invocation` error when using sse

[younes101020]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 20 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://github.com/younes101020/mswjs-nextjs-app-router-reproduction-issue

Reproduction steps

go to: https://codesandbox.io/p/github/younes101020/mswjs-nextjs-app-router-reproduction-issue/main?import=true

On right section click on preview 3000 then look at the displayed error.

Current behavior

I am encountering this error

I'm trying to intercept an sse request and mock the response, but I'm getting this error:

Everything works with basic fetch.

Expected behavior

sse request to be intercepted and msw handler mocked response to be received.

[kettanaito]

Hi.

I believe the issue is caused by destructuring the text encoder and taking its encode method out of context. This should fix it:

-const { encode } = new TextEncoder();
+const encoder = new TextEncoder();

-controller.enqueue(encode(JSON.stringify(data)));
+controller.enqueue(encoder.encode(JSON.stringify(data)));

Please try this and let me know.

---

On a related note, check out the first-class sse API coming to MSW. See this comment to install the preview version: #2299 (comment)

[kettanaito]

Also, if you want to simulate SSE, you have the write the correct frame to the stream. What you're writing right now is not a valid SSE frame. You likely want something like:

encoder.encode(`data:${payload}`)

Make sure to handle the new lines correctly as well since that's how the start/end of the frame is determined.

You can take a look how we're implementing the message frames here but I rather advise you use the mentioned sse API instead.

I will close this issue because your usage seems to be incorrect and we've got a pull request with test coverage to prove that SSE can be implemented on top of present MSW.