MSW + Next.js does not intercept requests after page refresh

[khoi-fish]

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 14 or higher

Node.js version

>= 16

Reproduction repository

https://github.com/khoi-fish/with-msw-fix/tree/fix

Reproduction steps

1. yarn
2. yarn dev
3. Navigate to localhost:3000
4. Notice that the page loads fine
5. Hit refresh
6. msw fails to intercept request and the page breaks

Current behavior

Expected behavior

The expectation is that refreshing should not break the page.

[khoi-fish]

Happy to answer any questions to further help identify the issue 🙂

[gidztech]

I ran into this issue today after updating Next.js. I played around with the different versions that have been released recently, and it seems it only started happening in v13.4.13. On prior versions, you can refresh the page and the interception works. I've not dug deeper into why yet.

[kettanaito]

I'm going to close this. Next.js doesn't work well with MSW at the moment. Until I have a fully functional example as confirmation of that, Next.js is not supported.

You can follow the progress of that example here:
mswjs/examples#101

The Next.js team has also reached out to me to help address the remaining issues on Next.js side, so I hope to post some updates soon.

[SalahAdDin]

I'm going to close this. Next.js doesn't work well with MSW at the moment. Until I have a fully functional example as confirmation of that, Next.js is not supported.

You can follow the progress of that example here: mswjs/examples#101

The Next.js team has also reached out to me to help address the remaining issues on Next.js side, so I hope to post some updates soon.

It does not work at all.