msw in browser doesn't work with Vite

Describe the bug

see title - I can’t get msw browser to work at all with Vite as a bundler. Was working before with same setup except with Parcel as bundler.

Environment

• msw: 0.27.1
• nodejs: v12.20.1
• npm: 6.14.10

Please also provide your browser version

chrome macos 89.0.4389.114

To Reproduce

Steps to reproduce the behavior:

1. Use Vite as bundler
2. build using vite --debug
3. see in build debug output vite:spa-fallback Not rewriting GET /mockServiceWorker.js because the path includes a dot (.) character. +4s
4. see error in browser console: A bad HTTP response code (404) was received when fetching the script.
5. don’t see [MSW started] in browser console (whatever the usual message is to indicate msw has started successfully)

Guess

this issue (has similar error as in vite build log) https://github.com/vitejs/vite/issues/2245 might have something to do with it? I tried the ‘vite-plugin-rewrite-all’ package mentioned in that issue, and it didn’t work for me.

[midanosi]

I followed the strategy by msutkowski in my repo, and it’s working just fine now, thanks for providing the example that helped.

Also just got an email from someone else leaving a comment in this thread i thought? But can’t see it here… anyway they said that likely the only reason it wasn’t working for me was that I hadn’t put my mockServiceWorker file in /public, which was the case. Sorry for being dumb, and thanks for the help!

[msutkowski]

Follow up: here’s the way I’d actually recommend doing it: https://github.com/msutkowski/msw-ts-vitejs/pull/1/files.

This leverages the special web worker feature of vite, and skips the production & public folder issue altogether.