Error: Service worker has an unsupported MIME type ('text/html')

[ebenezerdon]

Describe the bug

Using the create-react-app-typescript-pwa template to generate a progressive web app returns the following error when `serviceWorker.register() is called:

index.js:1 Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/serviceWorker.js'): The script has an unsupported MIME type ('text/html').

• I'm only able to see the error message after I remove the following condition in the checkValidServiceWorker() function in ./src/serviceWorkerRegistration.ts:

if (
        response.status === 404 ||
        (contentType != null && contentType.indexOf('javascript') === -1)
      ) {

Did you try recovering your dependencies?

Yes

Please paste the output of npm --version and/or yarn --version to confirm.
-->

7.6.1

Which terms did you search for in User Guide?

PWA, TypeScript, Workbox, Service worker

Environment

current version of create-react-app: 4.0.3
System:
OS: Windows 10 10.0.17763

Steps to reproduce

• Run npx create-react-app my-app --template cra-template-pwa-typescript
• modify serviceWorker.unregister() to serviceWorker.register()

Expected behavior

• Service worker should be registered

Actual behavior

Service worker not registered

[jsomdev]

Have you found any workarounds to solve this issue? @ebenezerdon
I have the same issue

[lotorvik]

Did you also remove the process.env.NODE_ENV === 'production' to get it to work on localhost?
I have the same problem but seems we are trying to load the 404 error page instead of the service-worker.js, since the service-worker.js file is in the src directory and not the public directory. When I build first and run it with "serve -s build" it works fine. Not very practical for development. Any suggestions for better development flow would be appreciated.

[saheelsapovadia]

process.env.NODE_ENV === 'production'

Yes You need to remove and save it as a comment near by temporarily

[saheelsapovadia]

Facing the same issue @ebenezerdon any fixes or work arounds found yet ?

[eliranmal]

workaround - deploy a production build to a local static server:

npm run build && npx serve -s build

[robinjhuang]

I ended up fixing it by updating serviceWorker scripts with the newest version of CRA. Just generate a new project and copy the relevant files over.

[eliranmal]

@robinjhuang - that didn't work for me (i created the app with the pwa template today, so i'm assuming it's the latest version as well).
it still has the issue of the import statements that cannot work without being transpiled (due the desperate module systems). how did you overcome that?

or do you mean the latest version of the core template, and not the pwa?

[robinjhuang]

@eliranmal What error are you seeing regarding import statements? I never had import statement errors. That seems like a different issue.

My understanding of the MIME type error is that indicates that the service worker did not register correctly.

I just ran npx create-react-app my-app --template cra-template-pwa-typescript
copied over service-worker.ts and serviceWorkerRegistration.ts and updated my index.tsx.

[eliranmal]

well, in typescript all the code is always pre-processed by the typescript compiler (even files inside the public directory, if they are .ts* files).

this is not the case in vanilla javascript, where copying the file would suffer broken dependencies (since no dependency resolution can done by the module builder in such code; what is the meaning of import Something from 'something' in the public directory, without transpilation?)

by the way, the mime type error happens before the service worker has a chance to register (or even load its module code) - it is thrown because the server is not set up to serve this path/uri pattern, or due security restrictions in the client.

[robinjhuang]

Sorry, can you explain your set up? You're not using typescript I'm assuming. Also, here are my file locations. They're not in public/
myapp/src/service-worker.ts
myapp/src/serviceWorkerRegistration.ts
myapp/src/Root.ts

[eliranmal]

my setup is an unejected create-react-app application, built using the vanilla javascript variant of the pwa package.

i'm not sure anymore that the problem can be resolved by manually copying the file. i believe that's the job of the workbox plugin (that eventually receives this file's path), but for some reason it's blocked in development (i presume due known issues with the devserver).

can't help much more 🤷

[psiservices-justin-sullard]

Given this issue was encountered on Windows and seems to match the symptoms we experienced on Windows I'm wondering if this PR would be relevant: #11640

[h27-webdev]

Has anybody figured this out?

I have created a fresh project using npx create-react-app my-app --template cra-template-pwa for vanilla JS setup

And it's not working for localhost.

Note: I have already removed this condition:

Also I have tried the solution suggested here: https://stackoverflow.com/questions/49566059/service-worker-registration-error-unsupported-mime-type-text-html But it didn't work

[meetmistry96]

The following steps worked out for me and resolved the issue.

1. Move the serviceWorkerRegistration.ts file from Public folder to a common folder under src folder.

2. Register the serviceWorkerRegistration file into the respective location:

let newSw = await navigator.serviceWorker.register(
'/serviceWorkerRegistration.ts'
);

[bandinopla]

When working on localhost, you need to do this:

1. Remove the check to see if we are in production
2. install react-app-rewired to make modification in webpack's config.
3. install workbox-webpack-plugin Because CRA uses workbox as Service Worker library... it is all wired to use it... that's why...
4. create the webpack override:

const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const path = require("path");


module.exports = function override(webpackConfig, env) {
    //do stuff with the webpack config... 
    const isEnvDevelopment = env === "development";
    if (isEnvDevelopment) {
        const newConfig = {
            ...webpackConfig,
            plugins: [
                ...webpackConfig.plugins, 

                new WorkboxWebpackPlugin.InjectManifest({
                    swSrc: path.resolve(__dirname, "src/service-worker.js"),
                    dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
                    exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
                    maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
                }),
            ],
        };
        return newConfig;
    } else {
        return webpackConfig;
    } 
  }

5. Modify your package.json to use "start": "react-app-rewired start" while you dev...

That's it... now, the service worker that is at src/service-worker.js will exist in the public folder when running on dev mode.
A thing to notice... it won't have HMR... any modification to the service-worker.js will require you to stop and restart the server, also, close the window and open it again (to let the new modified service worker take control)