Wrong main.js file is tried to download after a deploy (CRA + S3 + Cloudfront)

[segulino]

Is this a bug report?

I think that yes, maybe related to service worker func.

Did you try recovering your dependencies?

It isn't related with this.

Environment

Node version: v8.11.1
Yarn version: v1.2.1
Hosted on Amazon S3 + Cloudfront

Steps to Reproduce

1. Build app using "react-scripts build", a new main.yyyy.js is generated.
2. Sync to aws s3 bucket
3. Invalidate cloudfront cache
4. Try access to webapp url.
5. The magic occurs:

The browser try to get old main.xxxxx.js generating an 404 not found error (user see a white screen), if you reload the browser web app is loaded rightly.

Expected Behavior

After a deploy with the steps mentioned, when we try to access web app url this should get the new main.js file, avoiding the first white screen.

I've reviewed this issue: #3688 that is exactly the same problem, but i've not found a solution for this.

It's very important for us, thanks in advance for your help.

[segulino]

Hi, I've understood that the one problem with this was only me, because by not understanding exactly how the service worker worked, we made an erroneous decision in our deploy process.

• We had the service worker registered, until that point everything ok.
• Every time we accessed the application who served us the content was the service worker, taking what we had cached.
• When we wanted to upload a new version of the application, we did the build and made a sync to amazon s3 (using the command --delete to delete the previous content).
• When trying to enter again, the service worker tried to serve what he had cached, as the corresponding main.js no longer exists, he threw the white screen. However, the service worker already detected that there was new content and downloaded it.
• When refreshing showed this, and everything happened to be fine.

[BuildWithLal]

@segulino how did you resolve this? i am trying to invalidate cache on Cloudfront but not getting any success. i have tried below AWS commands but still getting this behavior of not picking the right main.***.js at first hit but on 2nd.

aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_ID} --paths '/index.html'

aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_ID} --paths '/*'

[andidev]

Having the same issue. If I'm really unlucky and refresh the page the wrong time it seems as it downloads the new service worker and then caches the main.js file which is invalid cause it has not yet finished uploading.

[bill-vatomic]

Has anyone resolved this issue? Currently facing the same problem.

[Timer]

This is fixed with the default service worker behavior in v2.

[andidev]

@bill-vatomic
version 2 of create react app and changing the uploading order to s3 (upload service-worker.js and index.html last) seems to solved it for me.

[bill-vatomic]

@bill-vatomic
version 2 of create react app and changing the uploading order to s3 (upload service-worker.js and index.html last) seems to solved it for me.

Thanks for the reply! Looks like I am still on version 1.5. I will look into upgrading, but I was able to solve our problem by chunking out my JavaScript files. I found out that the service-worker in this version of CRA has a 2MB file limit, and our main JS file passed 2 MB a few weeks ago. I am now dynamically loading the routes in my app, which chunked all the files out to files under 2 MB.