Infinite loading when refreshing the page in NextJS

Describe the bug

Hello @kettanaito I add msw to nextjs with server side rendering, which make hot reloading in Nextjs not work.

I tested and saw that at my local, when editting code then waiting it display on screen, but not. I have to Ctrl + f5. If it’s lucky it will show up, otherwise the machine will hang with the words ‘waiting for existing socket’ .

But when I close tab and open new tab, it’s ok, But that’s really inconvenient, if I comment require(‘…/mocks’) in _app.js file. It’s oke

Environment

• msw: 0.26.1
• nodejs: 12.18.2
• npm: 6.14.5

Version chrome: 88.0.4324.104

To Reproduce

Link repo: https://codesandbox.io/s/serverless-fog-mex0z?file=/package.json:352-358

Screenshots

If applicable, add screenshots to help explain your problem.

[jedfoster]

I don’t think this is fully fixed. I’m seeing infinite refresh behavior in my own next.js app, same as I was seeing in the OP’s sandbox. My app uses msw v0.28.1, so I forked the OP’s sandbox and updated to the latest msw, v0.28.2, and still see this behavior.

Environment

msw: 0.28.2 nodejs: 12.18.2 npm: 6.14.6

Chrome: 89.0.4389.114

To Reproduce

Code Sandbox: https://codesandbox.io/s/busy-water-u8u1d Standalone web view: https://u8u1d.sse.codesandbox.io/

Open the Chrome dev tools and refresh the result web view pane and it may go into an infinite refresh loop. You will definitely see the loop if you open the standalone web view in a new window.

This is how I have my dev tools configured:

---

It’s entirely possible I’m simply doing service workers wrong, but if so, please provide some documentation on how the dev tools should be configured for working with msw.

Happy to open a new ticket if necessary.

[squalvj]

lmao i got this infinite loop while running in the server side using Next.JS with graphql, i solved it by removing unecessary data that outside the requested query, and it solve my infinite loop.