msw: Using MSW with Next.js causes stopping HMR/Fast Refresh

Describe the bug

Using MSW with Next.js causes stopping HMR/Fast Refresh because of unclosed SSE connections.

Environment

msw: 0.26.2
nodejs: 14.14.0
yarn: 2.4.1
Browser: Chromium 89.0.4389.82

To Reproduce

Steps to reproduce the behavior:

Clone https://github.com/tkamenoko/msw-nextjs-hmr .
Install deps: yarn .
Start dev server: yarn dev .
Open localhost:3000 in your browser.
Show Network tab in DevTools.
Click rendered links, and you will find that SSE connections between MSW and the dev server are not closed.
After the number of connections reaches the limit, HMR will not work.
Reload the page, but it will not complete: Waiting for available sockets

Expected behavior

A browser should receive changes and refresh the page. SSE connections between MSW and the dev server should be closed when connections between browser and MSW are closed.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 18 (9 by maintainers)

Commits related to this issue

chore(msw): setup msw (not supported by NextJS at the moment Bug described here: https://github.com/mswjs/msw/issues/642 — committed to topheman/nextjs-github-browser by topheman 3 years ago
chore(*): remove remaining msw files (won't work due to HMR in NextJS) https://github.com/mswjs/msw/issues/642 — committed to topheman/nextjs-github-browser by topheman 3 years ago

Most upvoted comments

Having the same Issue

msw v0.28.2
next v10.1.2

+13

khw1031 on May 11, 2021

@kettanaito I think what @tkamenoko and I mean is that this issue is tracking HMR issue, not the solved cookies issue which maybe not related to this one.😂 So we can still discuss here.

I’ve created a simpler repo to reproduce the issue: https://github.com/saintwinkle/with-msw-next-app .

And here’s the process:

https://user-images.githubusercontent.com/4580163/112440392-3720df00-8d85-11eb-9646-9b8df73879ef.mov

If i’m missing something, let me know. Thanks!

+11

saintwinkle on Mar 25, 2021

Hey, @tkamenoko. Thanks for the follow-up. No need to raise an issue, this will be fixed with #649.

Hello, sorry to bother. This issue hasn’t been fixed, I’m suffering the same issue as above.

And not noly React fast refresh, other tools using HMR may have this issue too (Nuxt.js for sure). Better to reopen 😃

msw: 0.27.1
node: 14.16.0
npm: 7.6.3
browser: Chrome 89.0.4389.90

saintwinkle on Mar 23, 2021

I have same problem with MSW + Next.js. Can we please reopen this issue?

panzelva on Apr 8, 2021

Getting the same problem as well.

jcheese1 on Apr 29, 2021