create-react-app: Cached SW index.html gets a 404 error on old bundle

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes, happened on multiple deployments.

Which terms did you search for in User Guide?

Read the parts about service worker and also searched for similar issues, found this one: https://github.com/facebookincubator/create-react-app/issues/3613 but that was about chunking, which I do not use.

Environment

node -v: 9.4.0
npm -v: 5.6.0
yarn --version (if you use Yarn): 1.3.2
npm ls react-scripts (if you haven’t ejected): n/a

Then, specify:

Operating system: Mac OS High Sierra
Browser and version (if relevant): Google Chrome 63

Expected Behavior

When I deploy a new version of my application I expect it to load the old HTML and load the old JS bundle from it’s cache. If that’s no longer available (for whatever reason) it should fetch the new HTML and with that also the new JS bundle.

Actual Behavior

The service worker serves the old index.html, but it tries to get the JS bundle from the server. Because a new version has been deployed that bundle is no longer there, so it receives a 404 error, resulting in a white (broken) page. Refreshing the page fixes the issue.

The contents of my index.js

// @flow
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import Organisation from './apps/organisation';

const release = process.env.REACT_APP_GIT_COMMIT;

// Set up Sentry
if (process.env.NODE_ENV !== 'development') {
  window.Raven.config(
    'https://secret@sentry.io/secret',
    { release },
  ).install();
}

console.log(`Commit: ${String(release)}`);

const element = document.getElementById('root');

if (element) {
  ReactDOM.render(<Organisation />, element);
}

registerServiceWorker();

Here screenshots of the network tab during the ‘broken state’

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20 (12 by maintainers)

Most upvoted comments

@Timer I hit this very same issue today after deployment using latest CRA 2.0.4 and the new Workbox service worker script.

Manually unregistering the worker and refreshing makes the site load, but any subsequent refreshes just crashes it again for me.

Used to work just fine with previous versions, mind you (sw-precache).

I believe this issue should be re-opened.

EDIT For what I’ve been gathering around, this seems to be related to chunk sizes - however, my app’s chunks are actually quite small:

  294.54 KB  build/static/js/1.7199b771.chunk.js
  49.06 KB   build/static/js/main.2c86934a.chunk.js
  21.38 KB   build/static/css/main.ff66eee3.chunk.css
  1.6 KB     build/static/css/1.fdfa198a.chunk.css

As you can see from the names of the chunks resulting from the build and the ones being fetched from the worker (screenshot), service-worker.js tries to load a different version every time (cc. @jeffposnick)

I’m at a loss here, at the moment.

nfantone on Oct 4, 2018

@jeffposnick I’m not sure how I can see the unminified file size with create-react-app but I can confirm that code splitting fixed this problem. I think it’s a good thing that large files are not downloaded for offline usage but it would be good to show the message if the file size is too large. I now have to manually check the service-worker.js before deploying to make sure that all chunks are in there because if they don’t my site breaks on the next deployment. @gaearon would it be possible to show that message?

rovansteen on Feb 2, 2018

https://github.com/facebook/create-react-app/issues/3882#issuecomment-362590606

solution worked for me

Stas-Buzunko on Aug 21, 2018

@sh00ter the solution is code splitting. See one of my comments above.

rovansteen on Jun 20, 2018

Here are some “odd” things that your screenshots/code snippets illustrate which I’d like to get to the bottom of:

There are three requests for index.html from within the service worker shown in your Network Panel screenshot, but there’s only one reference to /index.html in your precacheConfig. (This might be a red herring, but it’s odd to see.)
As you say, there’s no reference at all to your .js files in the precacheConfig. Using a cached version of index.html without a corresponding cached entry for the .js would lead to version mismatches that you’re seeing.

You may be on the right track regarding size limits, as sw-precache will, by default, not precache any resource whose actual size, uncompressed, is above 2mb. Your log messages indicate that the compressed size of main.10cf50b4.js is 399.47kb, and I could easily imagine the uncompressed size being over 2mb. Can you confirm that? (There’s normally a build-time message logged about resources that are too large to precache, but that’s disabled in create-react-app.)

jeffposnick on Jan 23, 2018