Create a custom service worker in ReactJs

I am trying to add a custom service worker to a ReactJs web app created with create-react-app, but i get an error when registering it: The script has an unsupported MIME type ('text/html') . If I understand it correctly the script is being parsed to register() as a text file, but I don't know why that might be.

On a simple HTML5 web page, this error would go away after serving the page from a server. So I tried building the react app and serve with from a server (using this cli : https://www.npmjs.com/package/serve), but with no luck.

Here is my react index.js and service worker:

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import {registerMyServiceWorker} from './registerServiceWorker'
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root'));

registerMyServiceWorker();

registerServiceWorker.js

import * as serviceWorker from './service-worker'

export function registerMyServiceWorker() {
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
            navigator.serviceWorker.register(serviceWorker).then(function (registration) {
                // Registration was successful
                console.log('ServiceWorker registration successful without scope: ', registration.scope);
            }, function (err) {
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    }
}

service-worker.js

window.self.addEventListener('fetch', event => {
    console.log('fetching');
    // Prevent the default, and handle the request ourselves.
    event.respondWith(async function () {
        // Try to get the response from a cache.
        const cachedResponse = await caches.match(event.request);
        // Return it if we found one.
        if (cachedResponse) return cachedResponse;
        // If we didn't find a match in the cache, use the network.
        return fetch(event.request).then(async function (response) {
            return caches.open('my-cache').then(async function (cache) {
                return response;
            })
        })
    }());

    fetch(event.request).then(async function (response) {
        caches.open('my-cache').then(async function (cache) {
            cache.put(event.request, response);
        })
    })

});

What should I do to fix the error?

Thanks in advance for helping out!