在浏览器中出错 - 无法为范围注册 ServiceWorker

如何解决在浏览器中出错 - 无法为范围注册 ServiceWorker

我正在尝试使用 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())
}

我的 service worker 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').

另外我有点困惑，因为我看到在 src 下创建了一个额外的 serviceWorker.js（这似乎是通过 create-react-app 生成的），正如你在上面看到的，它也被导入到 src/index.js 中。 js（再次通过 create-react-app），但我希望使用的是 public/mockServiceWorker.js

我不确定这些是否无关。我正在尝试按照 https://github.com/ghoshnirmalya/introduction-to-msw

中的示例进行操作

还有 MSW 官方页面供参考 - https://mswjs.io/docs/getting-started/integrate/browser

解决方法

我假设您正在使用 Create React App (CRA)。 MSW documentation 表示您应该从 src/index.js 文件中删除以下行：

serviceWorker.unregister()

你这样做了吗？

CRA 模板已经带有 service worker，这就是为什么你有两个文件。

默认情况下禁用 CRA 服务工作线程（因此 serviceWorker.unregister() 行）。通过删除 unregister 行，您将在生产中运行默认服务工作线程。确保这是您想要的。