Service worker slow / failing JS and image requests when running in cypress browser

Describe the bug

When using MSW in my app and trying to run cypress, MSW cannot fetch images after the 1st run. I get:

mockServiceWorker.js:184 [MSW] Failed to mock a "GET" request to "http://localhost:3000/static/media/back-arrow.42b194d9.svg": TypeError: Failed to fetch
(anonymous) @ mockServiceWorker.js:184
Promise.then (async)
(anonymous) @ mockServiceWorker.js:183
mockServiceWorker.js:184 [MSW] Failed to mock a "GET" request to "http://localhost:3000/static/media/user-icon.f8b2f969.svg": TypeError: Failed to fetch
(anonymous) @ mockServiceWorker.js:184
Promise.then (async)
(anonymous) @ mockServiceWorker.js:183
mockServiceWorker.js:184 [MSW] Failed to mock a "GET" request to "http://localhost:3000/static/media/exclamation.bac54b11.svg": TypeError: Failed to fetch
(anonymous) @ mockServiceWorker.js:184
Promise.then (async)
(anonymous) @ mockServiceWorker.js:183
mockServiceWorker.js:184 [MSW] Failed to mock a "GET" request to "http://localhost:3000/static/media/scan-barcode.2264fdba.svg": TypeError: Failed to fetch

Cypress then gets into the loop of trying to request it, failing and trying to request it again resulting in crawling of a page load.

It seems like the service worker is sometimes finding the images and sometimes not:

Request URL: http://localhost:3000/static/media/back-arrow.42b194d9.svg
Request Method: GET
Status Code: 200 OK (from ServiceWorker)

Some JS also takes over 15s to load in the cypress browser.

Am I missing something or is anything else required to allow cypress to use mocks? Without msw cypress works completely fine and never takes long to load any JS files.

Environment

• msw: 0.21.2
• nodejs: 10.16.3
• npm: 6.90
• Cypress 5.1.0

Please also provide your browser version. Chrome Latest Stable

To Reproduce

Steps to reproduce the behavior:

1. Mock requests in your application. (npm start runs with all mocks by default), so mocking is in my application.
2. Run first set of cypress test (via cypress ui), rerun the same tests without closing the window and you will see the error.

Expected behavior

A clear and concise description of what you expected to happen. Loading of files (js, images etc) should load quickly not over 15s, images requests should also be quick

[jaslloyd]

@marcosvega91 Sorry it took so long but I did my best to create a reproduction repo on a smaller scale (our app where I saw this is much bigger and has code-splitting etc but I think I was able to successfully reproduce it.)

See https://github.com/jaslloyd/msw-sw-bug,

I left instructions in the readme, you will see it’s making over 1400+ requests when there is a test failure which is pretty much what was happening in our other app but on a bigger scale. Comparatively, when you remove MSW it makes 12 requests. You can imagine when these contain big enough JS bundles the page load can be significant as seen in my image.

Let me know if you need anything else

[jaslloyd]

@marcosvega91 That is super weird…so I just tried it again and i got your result what the hell is going on lol. Let me send this repo on that cypress issue maybe its something they can spot with MSW disabled