React production error with service worker: invalid MIME type

It happens if you have registered some service workers. If you open Chrome developer tools you may get some errors.Go to

Chrome Dev Tools -> Application -> Service Worker

In there if you are seeing some service worker is registered then you have to unregister it by clicking it and after that refresh the page and check.

From registrationService, I can see that:

    export default function register() {    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {        const publicUrl = new URL(process.env.PUBLIC_URL, window.location);        if (publicUrl.origin !== window.location.origin) {        return;        }        window.addEventListener('load', () => {        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;        if (isLocalhost) {            checkValidServiceWorker(swUrl);        } else {            registerValidSW(swUrl);        }        });    }    }

When its production environment, then it tries to register to registerValidSW(swUrl); where swUrl is <your domain>/service-worker.js(FYI PUBLIC_URL is set from homepage value of package.json). But I am guessing that is not a valid path, so its getting index.html from Django. That might be why you are getting this error.

Again, based on guess, I think you can do the following solution:

1. Serve service-worker.js in from static folder (for example url could be: /static/service-worker.js).
2. Update in registrationService.js: ${process.env.PUBLIC_URL}/service-worker.js to ${process.env.PUBLIC_URL}/static/service-worker.js.

See how it goes. There is another solution if you don't want to use registerService in production, just not to register that service(I am not sure if its recommended or not, but its up to you)

if (process.env.NODE_ENV != 'production') {    registerServiceWorker();}