vite dev server: infinte refresh loop when using msw

Describe the bug

running a vite dev server with msw will result in a refresh loop that keeps restarting the vite dev server. The setup did work in the past without issues, so I assume it may have something to do with some changes in a dependency.

Environment

• msw: ^0.38.1
• nodejs: v16.13.2
• `npm: 8.1.2 up to date Chrome and Firefox

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/vuejs/create-vue
2. create a vite app
3. npm install msw --save-dev
4. npx msw init public/ --save 5 setup MSW in main.ts

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";
import { setupWorker, rest } from "msw";

const worker = setupWorker(
  // Provide request handlers
  rest.get("https://example.com/user/:userId", (req, res, ctx) => {
    return res(
      ctx.json({
        firstName: "John",
        lastName: "Maverick",
      })
    );
  })
);

async function prepare() {
 return worker.start();
}

prepare().then(() => {
  const app = createApp(App);
  app.use(createPinia());
  app.use(router);
  app.mount("#app");
});

1. npm run dev

[rathax]

manually clearing the service worker from both firefox and chrome seem to have resolved the issue.

[dankremniov]

@kettanaito, I tried but didn’t manage to reproduce it in a clean repo. However, I managed to fix the issue in the project I was working on. The Next.js app was having a basePath set which means that worker’s scope was not root. As soon as I specifically specified root scope and added the required header (as per MSW docs) - the issue disappeared.