Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ebenezerdon opened this issue Mar 7, 2021 · 16 comments
Open

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

ebenezerdon opened this issue Mar 7, 2021 · 16 comments

Comments

@ebenezerdon
Copy link

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

@ebenezerdon ebenezerdon changed the title Service worker available in ./build/service-worker.js but not found on the server Error: Service worker has an unsupported MIME type ('text/html') Mar 7, 2021
@jsomdev
Copy link

jsomdev commented May 11, 2021

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

@lotorvik
Copy link

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
Copy link

process.env.NODE_ENV === 'production'

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

@saheelsapovadia
Copy link

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

@eliranmal
Copy link

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

npm run build && npx serve -s build

@robinjhuang
Copy link

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
Copy link

eliranmal commented Oct 13, 2021

@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
Copy link

@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
Copy link

eliranmal commented Oct 13, 2021

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
Copy link

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
Copy link

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
Copy link
Contributor

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
Copy link

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:

image

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
Copy link

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
Copy link

bandinopla commented Feb 9, 2024

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;
    } 
  }
  1. 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)

@BLUECALF
Copy link

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

Hello i use antd pro. was setting up pushy notifications.
for this issue i just

  • moved service-worker.js to /public directory.
    now it runs and i can access it in url/serivce-worker.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

12 participants