ServiceWorker not built in 4.x (next)

[zaneclaes]

Describe the bug

./build/service-worker.js is no longer generated at all (and there are no error messages) with the latest versions of CRA (4.x) using @next.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

N/A

Environment

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. npx create-react-app test
2. cd test
3. npm install --save react-scripts@next
4. npm run build
5. ls -la ./build

Expected behavior

./build/service-worker.js should be present.

Actual behavior

The file is missing. This causes a problem with apps which are upgrading from prior CRA versions, as they continue to reference the cached service worker (so the web app continues to cache old assets).

Reproducible demo

Just run the commands above.

[max-programming]

@zaneclaes I deployed it to netlify. Do you know how can I fix this issue without having a build folder locally?

[Empty2k12]

This does not only affect @next. I just reproduced it by downgrading from next to the newly released 4.0.0 from 4 days ago.

Steps to repro:

npx create-react-app cra-no-sw --template typescript
cat ./cra-no-sw/build/service-worker.js
cat: ./cra-no-sw/build/service-worker.js: No such file or directory

[adueck]

@Empty2k12 Yes, exact same problem here.

When I start a new app with

npx create-react-app my-app

The service worker is nowhere to be seen. 😢

Also the familiar section for registering the service worker in src/index.js is gone

This is no longer there 👇

import * as serviceWorker from './serviceWorker';

...

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register()

[max-programming]

Actually, I think SW is replaced by reportWebVitals. We need to create our own service workers

[neolefty]

The 4.0.0 changelog says:

We've switched to the Workbox InjectManifest plugin...

But I think I need more information. When I make a fresh project, it doesn't create a service worker either with the normal template or with --template typescript, nor are there instructions in the code to add one.

Is this an incomplete feature in 4.0.0?

[dwelle]

Turns out you need to create your own service-worker.js file. There was no mention of it in the release notes, and even the new docs aren't super clear on this.

I haven't investigated this fully, so in the interim I just copy/pasted what CRA@3 was building and modified it to use the new manifest accessible from self.__WB_MANIFEST. You can check it out here: https://github.com/excalidraw/excalidraw/pull/2320/files. Use at your own risk :).

[adueck]

Turns out you need to create your own service-worker.js file.

This is surprising, and disappointing (?). I loved using create-react-app because it always created a solid, installable PWA without having to worry about rolling a service-worker.js, which can be a bit of a minefield.

I really hope CRA doesn't drop the excellent ready-made service worker. 🥺

[kivervinicius]

I believe that there are more complaints about forcing a service worker by default than not, but it is extremely simple to continue using serviceWorker.

npx create-react-app my-app --template cra-template-pwa

[max-programming]

So I think there is no way except for making a custom service worker

[zaneclaes]

It would be nice if there were a decent upgrade path, here. Or just a documented one.

For those upgrading to 4.x in an existing project, this is an extremely confusing change. In my case, it transparently broke my application due to a sudden lack of service workers. As others have noted, the upgrade docs are woefully insufficient.

In any case, my "fix" was to create a dummy app:

npx create-react-app my-app --template cra-template-pwa-typescript

And copy over the relevant code:

• reportWebVitals.ts
• service-worker.ts
• serviceWorkerRegistration.ts

As well as the initialization code in index.tsx.

[chrisfinazzo]

I can confirm @adueck's findings as well. These files are not in the base template at all.

I am new to React and working to port a small microsite from Jekyll just to get a feel for things. The import in index.js and the register function are there, but that's it.

Maddening.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dwelle]

not quite resolved

[adueck]

Are there plans to re-include the ServiceWorker in 4.x onwards? @kivervinicius recommended using npx create-react-app my-app --template cra-template-pwa but that's an old template and seems unmaintained. I would really, really love for there to be a nice built in service worker available like in the good old days of CRA 3.x 🙇‍♂️

[sureshdube]

It would be nice if there were a decent upgrade path, here. Or just a documented one.

For those upgrading to 4.x in an existing project, this is an extremely confusing change. In my case, it transparently broke my application due to a sudden lack of service workers. As others have noted, the upgrade docs are woefully insufficient.

In any case, my "fix" was to create a dummy app:

npx create-react-app my-app --template cra-template-pwa-typescript

And copy over the relevant code:

• reportWebVitals.ts
• service-worker.ts
• serviceWorkerRegistration.ts

As well as the initialization code in index.tsx.

I tried these steps but it didn't work for me. Do I need to follow any more steps?

[caprica-Six]

I have just tried a new CRA with service worker and works fine, we just need to add as mentioned above, the following:

• add src/service-worker.js and serviceWorkerRegistration.js
• add import * as serviceWorker from './serviceWorkerRegistration' in index.js
• index.js - register serviceWorker.register();

Here's my package.json
`"dependencies": {

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"

},`

re-Run yarn build.
Check build folder, you should now have the compiled service-worker.js & service-worker.js.map files.

Did the same for an existing project, imported new files, but updated react scripts to v4.
It now works fine.

Hope that helps someone.

[max-programming]

I have just tried a new CRA with service worker and works fine, we just need to add as mentioned above, the following:

• add src/service-worker.js and serviceWorkerRegistration.js
• add import * as serviceWorker from './serviceWorkerRegistration' in index.js
• index.js - register serviceWorker.register();

Here's my package.json
`"dependencies": {

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"

},`

re-Run yarn build.
Check build folder, you should now have the compiled service-worker.js & service-worker.js.map files.

Did the same for an existing project, imported new files, but updated react scripts to v4.
It now works fine.

Hope that helps someone.

Yeah that's an effective way to do it but with the command npx create-react-app my-app --template cra-template-pwa does that automatically. But without web vitals. Read more

[chrisfinazzo]

I had to uninstall and reinstall my global packages and update my project's Node version - mostly as a way of getting around CRA being really out of date - but I can confirm the pwa template approach @max-programming suggests does in fact, work.

[psiservices-justin-sullard]

Just a guess but perhaps the issue being encountered is related to an issue resolved in this PR: #11640

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ghacosta]

This is still an issue.