How to use MSW with Parcel?

[zorzysty]

I have a small TypeScript React project that I bundle using Parcel. I wanted to add MSW for mocking server requests, but I have troubles getting it to work.

I have a very minimalistic Parcel setup:

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
},

And as for the MSW, everything is done according to the documentation. Here's how the service-worker is initiated:

if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser")
  worker.start()
}

The same exact implementation works perfectly when bundling with Webpack. But in Parcel it results in following errors in the console:

The script has an unsupported MIME type ('text/html').

[MSW] Failed to register a Service Worker: Failed to register a ServiceWorker for scope ('http://localhost:1234/') with script ('http://localhost:1234/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html').

Is there a way to get it to work?

[kettanaito]

Hey, @zorzysty.

Have you completed the browser integration steps?

The error that's being shown means that there's no mockServiceWorker.js file served by your app. This can happen because of the following reasons:

1. You forgot to run npx msw init <PUBLIC_DIR> (see the docs page above for more info).
2. You've provided the wrong PUBLIC_DIR path, so the worker is not where MSW expects it to be. You can easily check that: this file should exist: http://localhost:XXXX/mockServiceWorker.js, where XXXX is the port where your app is running locally.
3. Parcel requires to explicitly specify public files (similar to Angular).

I believe if you achieve the /mockServiceWorker.js file being served by the root of your website the issue will be resolved. Would you be interested in submitting a minimal Parcel usage example to our examples repository once we figure this out?

[zorzysty]

@kettanaito You're a godsend! I did run npx msw init but with public which works for Create-React-App, and not dist as I should when using Parcel. I would probably never figure this out if it weren't for you :) Thank you very much!

[kettanaito]

Glad you've spotted that! Happy to hear it works now.

[zorzysty]

I'll make sure to drop a PR with minimal Parcel usage example to MSW's examples repository soon :)

[kettanaito]

Thank you, @zorzysty!
Take a look at the existing examples to draw some inspiration.