0

I have a react app uploaded on aws s3, this is the command I am using to deploy it

npm i
npm run build
aws s3 sync build s3://bucket/path --acl=public-read --delete
aws cloudfront create-invalidation --distribution-id XXX --paths "/*"

Then I have many errors like

Loading chunk X failed

or

Loading CSS chunk X failed

I was thinking it was due to cache issue after deployment, bet now I didn't deploy for a week and the error rate does not decrease.

For example, the error is Loading CSS chunk 6 failed. (/static/css/6.32a7316b.chunk.css) then when I go to https://my-website.com/static/css/6.32a7316b.chunk.css the file is loaded without issue

I read many posts but can not find any solution, some were talking about CORS configuration but should not be an issue as the file are coming from the same domain

There is maybe some cache rule to define, but I do not really know which one and where.

I am also using Cloudflare between the client and S3 I do not know if it has an impact

Ajouve
  • 9,735
  • 26
  • 90
  • 137
  • Which command is giving you the errors? Could you add 2-3 more lines after each command? I expect it's the `s3 sync` command? Could you add the relative path after `s3://bucket/{this-here-please}` – Christoph Kluge Feb 17 '22 at 21:16
  • Are you receiving this message in the browser? If that's the case you may receive an "outdated" version, depending on your cloudfront caching configuraiton. Can you try to load the same asset with a custom parameter e.g. `?x=1` to see if the resource is loaded correctly? – Christoph Kluge Feb 18 '22 at 09:41
  • you mentioned both CloudFlare and CloudFront , are you using both? – Gapton Feb 21 '22 at 06:25
  • I am receiving the message in sentry and yes both Cloudflare and CloudFront. I am getting the errors weeks after the last deploy and on the latest uploaded files, not files which has been removed – Ajouve Feb 28 '22 at 13:38

1 Answers1

2

This error is occurring because some users are getting a version of the files that not exists anymore on the server.

When you use the create-invalidation Cloudfront method and invalidate the output directory, the users with cached files will try to load a file that not exists and you will saw this kind of error happening.

A option to stop with these errors is to have an app version tracking (using AJAX and read from db or dynamic config file) and when the app detects a newer version, message the user about it and ask them to reload the page as you can see on this answer here.

Also, check the output.publicPath option in the webpack.config.js file, maybe changing the default for / or /dist can solve your issue.

valdeci
  • 13,962
  • 6
  • 55
  • 80
  • Had uploaded files by re-building React app at least 5 times, just had to invalidate the caches, set-up a validation with `/*` and voila. – Lalit Fauzdar May 09 '22 at 20:25