How to initialise mock service worker (msw) with reactjs project

Question

I tried using msw for local dev and testing using official guide

but faced following issue:

[MSW] Failed to register a Service Worker for scope ('http://localhost:8080/') with script ('http://localhost:8080/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


  [1]: https://mswjs.io/docs/getting-started/integrate/browser

My folder structure:

Answer 1

As the error message suggests, you haven't placed the Service Worker (mockServiceWorker.js) script in your public directory. Based on your screenshot, your public directory is most likely ./build.

Execute this command to place the worker script in your public directory:

$ npx msw init ./build

You should be able to access the worker script in your running application by this URL: http://localhost:8080/mockServiceWorker.js. That should return the contents of the mockServiceWorker.js file to be registered in your app.