Failed to fetch after first interception about msw

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

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

[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