javascript - Getting error in browser - Failed to register a ServiceWorker for scope - Stack Overflow

admin管理员组

文章数量:1026989

I am trying to use MSW for running my React app with mock data. Below is my 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())
}

My service worker JS is located at public/mockServiceWorker.js

My src/mocks/browser.js is as below;

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

Also my src/mocks/index.js is as below;

if (typeof window === "undefined") {
  const { server } = require("mocks/server");
  server.listen();
} else {
  const { worker } = require("mocks/browser");
  worker.start();
}

Now when running the app in browser, I see the following error;

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').

Also I am a bit confused as I am seeing an additional serviceWorker.js created under src (this seems to be generated via create-react-app) and as you can see above, this is also imported in src/index.js (again via create-react-app) , but the one I am looking to use is at public/mockServiceWorker.js

I am not sure if those are unrelated. I am trying to follow the example at

Also MSW official page for reference -

I am trying to use MSW for running my React app with mock data. Below is my 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())
}

My service worker JS is located at public/mockServiceWorker.js

My src/mocks/browser.js is as below;

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

Also my src/mocks/index.js is as below;

if (typeof window === "undefined") {
  const { server } = require("mocks/server");
  server.listen();
} else {
  const { worker } = require("mocks/browser");
  worker.start();
}

Now when running the app in browser, I see the following error;

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').

Also I am a bit confused as I am seeing an additional serviceWorker.js created under src (this seems to be generated via create-react-app) and as you can see above, this is also imported in src/index.js (again via create-react-app) , but the one I am looking to use is at public/mockServiceWorker.js

I am not sure if those are unrelated. I am trying to follow the example at https://github./ghoshnirmalya/introduction-to-msw

Also MSW official page for reference - https://mswjs.io/docs/getting-started/integrate/browser

• javascript
• reactjs
• service-worker
• msw

Share Improve this question Follow edited Jun 25, 2023 at 19:28 shA.t 17k55 gold badges5858 silver badges119119 bronze badges asked Jun 29, 2021 at 12:41 copenndthagencopenndthagen 50.9k105105 gold badges313313 silver badges492492 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

The issue is most probably that your application doesn't see the serviceWorker.js in public folder. So it fails to register.

You probably, have to copy the worker script via the msw CLI utility. I had to run npx msw init <PUBLIC_DIR>, in my example, it was npx msw init ./public.

I am assuming that you are using Create React App (CRA). The MSW documentation says that you should remove the line below from the src/index.js file:

serviceWorker.unregister()

Did you do this?

The CRA template already es with a service worker, this is why you have two files.

The CRA service worker is disabled by default (hence the serviceWorker.unregister() line). By removing the unregister line, you will be running the default service worker on production. Make sure that this is what you want.

I am trying to use MSW for running my React app with mock data. Below is my 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())
}

My service worker JS is located at public/mockServiceWorker.js

My src/mocks/browser.js is as below;

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

Also my src/mocks/index.js is as below;

if (typeof window === "undefined") {
  const { server } = require("mocks/server");
  server.listen();
} else {
  const { worker } = require("mocks/browser");
  worker.start();
}

Now when running the app in browser, I see the following error;

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').

Also I am a bit confused as I am seeing an additional serviceWorker.js created under src (this seems to be generated via create-react-app) and as you can see above, this is also imported in src/index.js (again via create-react-app) , but the one I am looking to use is at public/mockServiceWorker.js

I am not sure if those are unrelated. I am trying to follow the example at

Also MSW official page for reference -

I am trying to use MSW for running my React app with mock data. Below is my 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())
}

My service worker JS is located at public/mockServiceWorker.js

My src/mocks/browser.js is as below;

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

Also my src/mocks/index.js is as below;

if (typeof window === "undefined") {
  const { server } = require("mocks/server");
  server.listen();
} else {
  const { worker } = require("mocks/browser");
  worker.start();
}

Now when running the app in browser, I see the following error;

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').

Also I am a bit confused as I am seeing an additional serviceWorker.js created under src (this seems to be generated via create-react-app) and as you can see above, this is also imported in src/index.js (again via create-react-app) , but the one I am looking to use is at public/mockServiceWorker.js

I am not sure if those are unrelated. I am trying to follow the example at https://github./ghoshnirmalya/introduction-to-msw

Also MSW official page for reference - https://mswjs.io/docs/getting-started/integrate/browser

• javascript
• reactjs
• service-worker
• msw

Share Improve this question Follow edited Jun 25, 2023 at 19:28 shA.t 17k55 gold badges5858 silver badges119119 bronze badges asked Jun 29, 2021 at 12:41 copenndthagencopenndthagen 50.9k105105 gold badges313313 silver badges492492 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

The issue is most probably that your application doesn't see the serviceWorker.js in public folder. So it fails to register.

You probably, have to copy the worker script via the msw CLI utility. I had to run npx msw init <PUBLIC_DIR>, in my example, it was npx msw init ./public.

I am assuming that you are using Create React App (CRA). The MSW documentation says that you should remove the line below from the src/index.js file:

serviceWorker.unregister()

Did you do this?

The CRA template already es with a service worker, this is why you have two files.

The CRA service worker is disabled by default (hence the serviceWorker.unregister() line). By removing the unregister line, you will be running the default service worker on production. Make sure that this is what you want.

本文标签： javascriptGetting error in browserFailed to register a ServiceWorker for scopeStack Overflow