Ошибка в браузере - не удалось зарегистрировать ServiceWorker для области видимости

Question

Я пытаюсь использовать MSW для запуска моего приложения React с фиктивными данными. Ниже мой index.js;

      import React from 'react';
import * as serviceWorker from './serviceWorker';

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start().then(() => renderApp())
}

Мой сервис-воркер js находится по адресу public / mockServiceWorker.js

Мой src / mocks / browser.js выглядит следующим образом:

      import { setupWorker } from 'msw'
import { handlers } from './handlers'
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

Также мой src / mocks / index.js выглядит следующим образом:

      if (typeof window === "undefined") {
  const { server } = require("mocks/server");

  server.listen();
} else {
  const { worker } = require("mocks/browser");

  worker.start();
}

Теперь при запуске приложения в браузере я вижу следующую ошибку:

      Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html').

Также я немного смущен, поскольку вижу дополнительный serviceWorker.js, созданный в src (похоже, он создается с помощью create-response-app), и, как вы можете видеть выше, он также импортируется в src / index.js (снова через create-response-app), но тот, который я хочу использовать, находится в public / mockServiceWorker.js

Я не уверен, не связаны ли они. Я пытаюсь следовать примеру на https://github.com/ghoshnirmalya/introduction-to-msw

Также официальная страница MSW для справки - https://mswjs.io/docs/getting-started/integrate/browser

Answer 1

Я предполагаю, что вы используете приложение Create React (CRA). В документации MSW говорится, что вы должны удалить строку ниже из src/index.js файл:

      serviceWorker.unregister()

Ты сделал это?

Шаблон CRA уже поставляется с сервис-воркером, поэтому у вас есть два файла.

Сервисный работник CRA по умолчанию отключен (отсюда serviceWorker.unregister()линия). Удалив unregisterстрока, вы будете запускать сервис-воркера по умолчанию в производственной среде. Убедитесь, что это именно то, что вам нужно.