Chrome reloads infinitely when serviceWorker.options.scope is set

[mizdra]

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/mizdra/reproduction-msw-scope-bug

Reproduction steps

1. npm i
2. npm run dev
3. Open http://localhost:5173/base with Google Chrome
   • I use Google Chrome 112.0.5615.137（Official Build） （arm64） on masOS Monterey 12.6.

Current behavior

Reloading the page many times at short intervals will cause it to enter an infinite reload loop.

reproduction-1.mov

Expected behavior

No infinite loops.

[mizdra]

If you interrupt the reload at the right time, you can take a peek at the code that requested the reload from the initiator tab.

reproduction-2.mov

According to this, the following code appears to be causing infinite reloads:

• msw/src/setupWorker/start/utils/getWorkerInstance.ts

  Line 33 in da92465

  location.reload()

[mizdra]

In addition to Chrome, this problem was reproduced in Firefox. However, it did not reproduce in Safari.

[MarwenIs]

same problem for me
any updated ?

[mizdra]

This problem does not yet seem to have been fixed.

FYI: You can temporarily work around this issue by installing ServiceWorker in the root path instead of using scope. This workaround only works for applications where it is not required to install under a subpath.

[shapedigital]

Can confirm the same is happening for me.

• MSW Worker file added to a static directory (non-root).
• Path set via serviceWorker.url in .start(). No handlers set up at this stage.
• Activating the worker using worker.start() will cause the site to reload indefinitely.
• As above, looking at the Network Initiator tab identifies it as MSW causing the reload.

[ptantanis]

This is my workaround which maybe useful for some cases.

For me, I got infinite reload when init mswjs outside of service worker scope.

let's say

• mockServiceWorker.js is at /some-path/mockServiceWorker.js so service worker scope is /some-path/
• Service worker url is configured to /some-path/mockServiceWorker.js
• When try to init mswjs at /some-path, then cause infinite reload. (init at /some-path/ is working fine because it's in service worker scope)

workaround

• Not init mswjs at path /some-path by checking current path
• Cons is that you cannot stub request at /some-path page.

if (window.location.pathname.startsWith('/some-path/')) { // only init mswjs when path is in service worker scope
  const worker = setupWorker(...handlers);

  void worker.start({
    serviceWorker: {
      url: '/some-path/mockServiceWorker.js',
    }
  });
}

[krzysztofradomski]

This problem still exits in msw: 2.3.1 and I encountered it while setting up our nx monorepo of React/Vite apps.

Here is the workaround:

• setup worker url (file path is apps/app1/public/mockServiceWorker.js)

apps/app1/src/App.tsx:

  worker.start({
    onUnhandledRequest: "bypass",
    serviceWorker: {
      url: "./mockServiceWorker.js",
    },
  })

• create base url similarly to @ptantanis comment, note the 2 slashes:

apps/app1/vite.config.ts:

export default defineConfig({
  base: "/myBaseUrl/",
  server: {
    port: 1234
  }
  ...
}

• access app at http://localhost:1234/myBaseUrl/

[huygn]

This is my workaround which maybe useful for some cases.

For me, I got infinite reload when init mswjs outside of service worker scope.

let's say

• mockServiceWorker.js is at /some-path/mockServiceWorker.js so service worker scope is /some-path/
• Service worker url is configured to /some-path/mockServiceWorker.js
• When try to init mswjs at /some-path, then cause infinite reload. (init at /some-path/ is working fine because it's in service worker scope)

workaround

• Not init mswjs at path /some-path by checking current path
• Cons is that you cannot stub request at /some-path page.

if (window.location.pathname.startsWith('/some-path/')) { // only init mswjs when path is in service worker scope
  const worker = setupWorker(...handlers);

  void worker.start({
    serviceWorker: {
      url: '/some-path/mockServiceWorker.js',
    }
  });
}

Thanks for the workaround! Alternatively, if you own your Web hosting server it is possible to "upgrade" SW scope by using Service-Worker-Allowed .ie including Service-Worker-Allowed: / in the worker file's response.