Service Worker script does not exist at the given path

[fhavrlent]

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.

[kettanaito]

Hey, @fhavrlent.

Just to clarify, do you confirm that the worker script is accessible via this URL?

https://cdn.blabla.no/blabla/blablabla-storybook/${commitSHA}/mockServiceWorker.js

Even if it is, I think it won't be able to register at the https://cdn.blabla.no scope. Service Workers can register and control client routes that are equal to the worker script's location or are its children. I'm talking about this in here. This may not be an issue per say, if you're not expecting requests to be intercepted on pages outside of https://cdn.blabla.no/blabla/blablabla-storybook/${commitSHA}/.

[fhavrlent]

Hello @kettanaito ,

yes, the script is accessible via that URL + the storybook is placed in the same folder, so intercepting requests should not be an issue. At least I have no way to test it since it is acting like there is no worker script at all.

[kettanaito]

Double-checking is your Storybook also running on https://cdn.blabla.no/blabla/blablabla-storybook? The origin of the worker and the origin of your Storybook must be the same, otherwise worker wouldn't register. You should really see error messages in your case anyway, the silent registration failure usually means you're not calling setupWorker (in the context of this add-on, you're not setting it up correctly).

I would kindly ask you to provide a reproduction repository around this. Or, at least, share a public URL of your deployed Storybook, maybe I would be able to understand what's going on in runtime.

[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.

[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

[santilp95]

I tried to deploy in chromatic with next script
"chromatic": "npx chromatic --project-token=", but have the next problem

and have the next problem

2Skeleton.js:133 Uncaught (in promise) Error: [MSW] Failed to register a Service Worker for scope ('https://62f2d36646e231f4cad67bc1-ichzqcmzpg.chromatic.com/') with script ('https://62f2d36646e231f4cad67bc1-ichzqcmzpg.chromatic.com/mockServiceWorker.js'): Service Worker script does not exist at the given path.

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

Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init
    at getWorkerInstance (Skeleton.js:133:1)
    at async Skeleton.js:133:1
    at async SetupWorkerApi.start (Skeleton.js:133:1)

In local i have the next script
"storybook": "start-storybook -p 6006 -s public ",

How put to deploy that take the msw?

[kettanaito]

@santilp95, can you please check if your Storybook build command also has the -s flag included for the static /public directory? As I recall, local dev and build are two separate commands, and I'd expect Storybook to use the build command on CI builds.

[santilp95]

@kettanaito yes, it work It works, I had to change the build, thank you very much

"build-storybook": "build-storybook -s public",

[kettanaito]

@fhavrlent, could you please try @WesleyKapow's suggestion and let me know? I believe it should resolve your issue.

[viktar-kolasau]

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

Hey, what about url: "./mockServiceWorker.js", instead of the full static link? Works just fine for me.