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

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

[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: https://github.com/facebook/create-react-app/pull/11640

[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 🤷