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

[watch-janick]

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.

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

[watch-janick]

@kettanaito Awesome, it's working now 🚀

Thank you very much! 🙏

[kettanaito]

I wonder if we should propose this change to the Next example. This race condition can bite in some cases.

[kettanaito]

I've reported this in the Next repo: vercel/next.js#43284.

[Sreejit7]

Hey @kettanaito thanks for the solution! Using require instead of await import does resolve the issue, but it gives a new error in the console (although the app works fine in the broswer):

error - unhandledRejection: Error [ERR_UNSUPPORTED_DIR_IMPORT]: 
Directory import '/Users/sreejitde/dev/ethereal/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest' 
is not supported resolving ES modules imported from 
/Users/sreejitde/dev/ethereal/node_modules/msw/lib/node/index.mjs
Did you mean to import @mswjs/interceptors/lib/interceptors/ClientRequest/index.js?

sorry if this is a silly question, but is this expected? if not, how to get rid of this?

[michalstrzelecki]

Hi! I was using the require and it was not working in firefox. It works using incognito chrome and incognito firefox. waitUntilReady also do not work when I try to run Playwright tests - first request have been not mocked.

I need to disable the react-query queries until service worker has been mounted.

waitUntilReady is broken.