MSW + NextJS 12+ : doesn't intercept first request, waitUntilReady not working

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

Browsers

Chromium (Chrome, Brave, etc.), Firefox, Safari

Reproduction repository

https://github.com/watch-janick/msw-nextjs12-issue

Reproduction steps

1. Clone the repo
2. Run yarn install
3. Run yarn dev
4. Open http://localhost:3000 in your browser
5. Open the browser console
6. Refresh the page

Current behavior

Right now MSW isn’t intercepting the first request.

Expected behavior

The first request should be delayed until MSW is ready according to waitUntilReady.

[watch-janick]

@kettanaito Awesome, it’s working now 🚀

Thank you very much! 🙏

[kettanaito]

Hey, @watch-janick. Thanks for reporting this.

May I ask you to try using require() here instead of import()?

https://github.com/watch-janick/msw-nextjs12-issue/blob/881d9606cc77b20fa61cf798d966c4f6d1f506b6/mocks/index.js#L6

What I think happens now is this:

• The initMocks function is async but it’s never awaited.
• This means it fires when you require('../mocks') and then runs in parallel to the rest of your app.
• This creates a race condition between await import('./browser') and your fetch() call on the page.

I’d suggest trying to require those browser and server parts synchronously using require().

Please give this a try and let me know.