Next.js 13 issue

[harisliv]

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

Reproduction repository

https://github.com/harisliv/next13-msw049.git

Reproduction steps

First install the dependencies with npm install and after run the app with npm run dev .

Current behavior

Right now with latest Next and msw the first fetch is not being caught by the MSW. You need to press the button and re-fetch to do so.

Expected behavior

First fetch should be caught by the MSW. The same example in Next12 works as expected!

[kettanaito]

Hey, @harisliv.

This is a known issue and I think it concerns even the previous versions of Next. The root cause for this is that the Next template uses a dynamic import but never awaits the Promise that import returns. This creates a race condition between the MSW setup being imported and your application's logic potentially making an on-mount request.

I've raised this in the Next repository (see vercel/next.js#43284). I propose we tackle it there, the issue is not related to the library itself but rather to how it's being set up in Next projects.

[harisliv]

Hey, @kettanaito
This is issues is not happening in Next 12.
Anyway i will keep track of the process.
Thanks :)

[kettanaito]

That may be dependent on the changes the Next team introduced in Next 13. Technically, that should still happen in any code because not awaiting the import promise is a race condition.

[harisliv]

Yes that makes sense.
Thanks again.