Setting serviceWorker url to another relative path does not work

[samadadi]

Moving mockServiceWorker.js to mocks sub-folder and changing serviceWorker url from /mockServiceWorker.js to /mocks/mockServiceWorker.js in src/mocks/index.js file, does not work and does not intercept requests in this starter project. please help. thank you.
vite & solid starter project

[kettanaito]

Hey, @samadadi.

Note that moving the worker script changes the scope at which it can intercept requests. I highly recommend reading through this to understand this behavior better.

When you move mockServiceWorker.js to /mocks, the worker, and thus MSW, cannot intercept requests that originate from pages other than /mocks/* (i.e. from the homepage of your application). I can see the http://localhost:3000/mocks/mockServiceWorker.js script loaded successfully, as well as the MSW activation message printed. These two factors mean that MSW has been successfully enabled. The /api/graphql request is not intercepted because it's performed from the root / of your application, which is outside of the worker's registered scope:

• Worker's scope: /mocks
• Request origin: /

If your decision to move the worker script is purely aesthetical, consider leaving it at your application's root so it could capture all outgoing requests. If you absolutely must move the worker script, then follow the suggestions from the page I've linked above to configure your application to allow Service Worker to do so.

[samadadi]

Thank you so much for your time. Now I understand.

[samadadi]

I saw scope option for registering service worker in the mozilla documentation website. Is there an option for setting scope for msw?

service worker register syntax

[kettanaito]

All Service Worker options are available under serviceWorker property of the options you provide to setupWorker:

setupWorker({
  serviceWorker: {
    scope: '/'
  }
})

See the docs.