ServiceWorker not built in 4.x (next)

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:)

npx create-react-app test
cd test
npm install --save react-scripts@next
npm run build
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.

@zaneclaes

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

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

@Empty2k12

@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()

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

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?

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 :).

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. 🥺

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

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

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.

@adueck

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.

fix service worker after update to create-react-app 4

Fix service worker

Fix service worker (#202)

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.

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

@max-programming

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.

fix: Add missing service-worker to avoid 404

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

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.

This is still an issue.

Navigation Menu

Repository navigation

ServiceWorker not built in 4.x (next) #9776

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ServiceWorker not built in 4.x (next) #9776

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

Activity

max-programming commented on Oct 23, 2020

Empty2k12 commented on Oct 27, 2020

adueck commented on Nov 3, 2020

max-programming commented on Nov 3, 2020

neolefty commented on Nov 3, 2020

dwelle commented on Nov 3, 2020

adueck commented on Nov 4, 2020

kivervinicius commented on Nov 4, 2020

max-programming commented on Nov 6, 2020

zaneclaes commented on Nov 17, 2020

chrisfinazzo commented on Nov 19, 2020

10 remaining items

caprica-Six commented on Mar 15, 2021

max-programming commented on Mar 16, 2021

chrisfinazzo commented on Mar 16, 2021

psiservices-justin-sullard commented on Dec 6, 2021

stale commented on Jan 8, 2022

ghacosta commented on Jan 24, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions