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

(NOTE: I asked the same question on SO.

[zorzysty]

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.

[rabelloo]

Personally I do "prestart": "mkdir -p dist && msw init dist",.

I'd also change that require to a dynamic import.

if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('./mocks/browser');
  await worker.start();
}

Might need to wrap your render call in an async IIFE.

(async () => {
  await worker.start();

  render(<App />, ...);
})();

[Lueton]

No matter what I try, nothing works for me honestly. Could somebody please provide a working repo with parcel V2?