Service Worker script does not exist at the given path

Hello, we have a storybook running in a subdirectories (for PRs and also one stable version). Msw was not working out of the box for this setup, but then I used #75 setup.

  serviceWorker: {
    url: `blabla/blabla-storybook/${STORYBOOK_SHA ?? "latest"}/mockServiceWorker.js`,
  }

Issues is, we are still getting an error that file does not exist in the path. But when I click on the link in the error message, I am taken to mockServiceWorker.js, so it obliviously exist in the location.

Uncaught (in promise) Error: [MSW] Failed to register a Service Worker for scope ('https://cdn.blabla.no/') with script ('https://cdn.blabla.no/blabla/blablabla-storybook/${commitSHA}/mockServiceWorker.js'): Service Worker script does not exist at the given path.

Did you forget to run "npx msw init <PUBLIC_DIR>"

We are using React with CRA and latest version of storybook.

Is anyone able to help with this, please? I have no clue at this point what might be the issue.

[WesleyKapow]

Just ran into this as well.

Work around is to tell MSW where to look for the file. One gotcha is you’ll likely want to have it be different for github pages vs running locally.

// preview.js

let options = {};
if (location.hostname === "username.github.io") {
  options = {
    serviceWorker: {
      url: "/repo-name/mockServiceWorker.js",
    },
  };
}

initialize(options);

https://msw-sb.vercel.app/?path=/story/guides-getting-started--page#configuring-msw https://mswjs.io/docs/api/setup-worker/start#serviceworker

[guissimatheus]

So, I kinda have the same problem. I have a SignIn View that mocks the login request at the stories in the Storybook. If I run it local, it works as expected, but it won’t work at my GitHub repository as it can’t find the mockServiceWorker.js file.

My application: https://guissimatheus.github.io/design-system-react My repo: https://github.com/guissimatheus/design-system-react

If you go to the browser network tab, you can see the msw get request url https://guissimatheus.github.io/mockServiceWorker.js with status code 404. I can access the worker file at https://guissimatheus.github.io/design-system-react/mockServiceWorker.js

I dunno how I can config my project to change the url and get the mock to work on GitHub.