javascript - How to use service worker library (MSW) with Parcel bundler

Question

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 their 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?

question from:https://stackoverflow.com/questions/65829550/how-to-use-service-worker-library-msw-with-parcel-bundler

Answer 1

Turns out I run npx msw init with public which works for Create-React-App, and not with dist as I should when using Parcel.