Failed to fetch after first interception

[weblancaster]

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

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

N/A

Reproduction steps

(this is a migration from older version to latest)

start Next server
go to a page that makes an HTTP call that is listed to be intercepted
page refreshes and MSW fails to fetch after the first request is successful

Current behavior

when next/react triggers a new load cycle the calls failed to fetch

Expected behavior

start Next server
go to a page that makes an HTTP call that is listed to be intercepted
page refreshes, msw intercepts consequent intercepted http calls

[Fallsleep]

in my case, most time every request is ok when I login by form in the page, there's no request before I typing username/password and click to send the first request after msw mocked.

If I refresh the page after login, there's a request for getting user info when vue router navigation, I'll got the same error, the request is send soon after msw mocked. the following login out request is successed.

I try to downgrade to 2.0.14, erveything is ok.

btw, if set onUnhandledRequest to bypass, it only thrown axios error, change to warn, it may thrown msw error sometime.

[dylano]

I'm seeing the same issue with with [email protected] on a React+Vite app. MSW does not appear to be initialized for the requests which are fired off as part of the initial page load.

This sort of looks like the symptoms reported in #1653 but the deferred render approach is not effective here as it was in 2.0.14.

Edit: The bug was mine -- I'm running fine with 2.1.2 now. The snippet in the deferred render comment linked above is missing an await on the worker.start() and that carried over to my code. Perhaps 2.0.14 is just slightly quicker to start and didn't affect my app in the same way despite not waiting on the start call.

[weblancaster]

In my case, I do see [MSW] Mocking enabled. and the first server request is mocked but none of the consequent calls.

I have been trying to replicate this issue:

• using the latest version of Next https://codesandbox.io/p/devbox/next-msw-m58zwf?file=%2Fapp%2Fpage.tsx%3A14%2C1
• using an older version of Next https://codesandbox.io/p/devbox/older-next-msw-ms4tz5?file=%2Fsrc%2Fpages%2Findex.tsx%3A25%2C11

I was not able to replicate the failed to fetch error but my local code the issue still persists

[tunganh-phamba]

same problem for me as well in version 2.1.2

[weblancaster]

In my case, I do see [MSW] Mocking enabled. and the first server request is mocked but none of the consequent calls.

I have been trying to replicate this issue:

• using the latest version of Next https://codesandbox.io/p/devbox/next-msw-m58zwf?file=%2Fapp%2Fpage.tsx%3A14%2C1
• using an older version of Next https://codesandbox.io/p/devbox/older-next-msw-ms4tz5?file=%2Fsrc%2Fpages%2Findex.tsx%3A25%2C11

I was not able to replicate the failed to fetch error but my local code the issue still persists

@kettanaito I was able to replicate in the codesandbox links above, wherein the first load MSW intercepts the first call but after I refresh the browser, there is no more interception.

[weblancaster]

For future reference found this post from @kettanaito on X

In summary, this is the state of Next.js + MSW right now:

• Server-side mocking is possible but your app won't pick up updates to the handlers unless you restart it;
• Client-side mocking is not possible.

https://twitter.com/kettanaito/status/1749496339556094316

[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.