Chunk load error when deployed (Hydrogen, Gatsby, etc.)

Support
, ,
2

Consider this situation (sequential steps):

  1. You have already deployed your site.
  2. The HTML file references chunks like chunk.12345.js.
  3. A user has loaded your site and is browsing it.
  4. You make another deploy.
  5. The latest deploy now has chunks like chunk.67890.js.
  6. If your app is using client-side navigation, the HTML never updates, so it’s still referencing chunk.12345.js which is now missing.

If this is the problem you’re mentioning, you’ve the following options (choose any one):

  1. Change your build process to not hash the file names, so it will produce chunk.js. Thus, even after a new deploy, the HTML file would always point to the “latest” chunk.js.
  2. Use service-workers (carefully!). You need to be very careful when implementing service worker caching, as if something goes wrong, we won’t be able to debug. But using a service worker, you can periodically check if there’s latest content available and refresh the content when needed. Till then, the old content can be served from service-worker cache.
  3. Use absolute URLs. Each deploy on Netlify has a deploy permalink (<deploy-id>--<site-name>.netlify.app). Even after you make a new deploy, this URL doesn’t change. So, chunk.12345.js would always be available on that deploy. So if you refer your assets to this permalink, they should always be available. You can choose to use the <base> tag to make this easier. However, be warned about CORS issues.