I get this: Service Worker URL: /mockServiceWorker.js index.tsx:33
Failed to start mock service worker: DOMException: Failed to update a
ServiceWorker for scope (‘http://localhost:3000/’) with script
(‘http://localhost:3000/mockServiceWorker.js’): The script has an
unsupported MIME type (‘text/html’). (anonymous) @ index.tsx:33
Promise.catch (async) ./src/index.tsx @ index.tsx:31 options.factory @
react refresh:6
webpack_require @ bootstrap:22 (anonymous) @ startup:7 (anonymous) @ startup:7 createGlobalStyle.ts:40 Please do not use @import CSS
syntax in createGlobalStyle at this time, as the CSSOM APIs we use in
production do not handle it well. Instead, we recommend using a
library such as react-helmet to inject a typical meta tag to
the stylesheet, or simply embedding it manually in your index.html

section for a simpler app. l @ createGlobalStyle.ts:40 Show 1
more frame Show less

My setup is as follow:

public/index.html & mockServiceWorker.js

index.tsx

import { Provider as ReduxProvider } from 'react-redux';
import ReactDOM from 'react-dom/client';

import store from './redux/store';
import { App } from './App';
import { worker } from './mocks/mocks';

async function enableMocking() {
  const serviceWorkerUrl = process.env.NODE_ENV === 'development' ? '/mockServiceWorker.js' : `${process.env.PUBLIC_URL}/mockServiceWorker.js`;

  console.log('Service Worker URL:', serviceWorkerUrl);

  return worker.start({
    serviceWorker: {
      url: serviceWorkerUrl,
    },
    onUnhandledRequest: 'bypass',
  });
}

const rootDiv = document.getElementById('root') as HTMLElement;
const root = ReactDOM.createRoot(rootDiv);

enableMocking()
  .then(() => {
    root.render(
      <ReduxProvider store={store}>
        <App />
      </ReduxProvider>
    );
  })
  .catch((error) => {
    console.error('Failed to start mock service worker:', error);
    root.render(
      <ReduxProvider store={store}>
        <App />
      </ReduxProvider>
    );
  });

export const API_URL = "/api";

import { FC } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import { Images } from '../components/pages/images';




const AppRouter:FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Images />} />
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

why i get the error and what can be the issue here ?