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

Support
, ,
1

Currently we have a Hydrogen instance on production running via Netlify. On top of that, we are also fetching content from Storyblok. You can see the result on www.horando.de – the website itself runs smoothly and the metrics are very good. We love Hydrogen!

But we investigated an error, which comes up everytime we trigger a new deployment on Netlify. We are using webhooks on Storyblok and when content is published or unpublished, we always trigger a new build on Netlify. Sometimes, when there are a lot of changes, we have a higher amount of triggers in the queue. See the following screenshot:

Bildschirmfoto 2023-03-01 um 13 32 09

If a deployment is ready, and you are opening up the website the first time, we see the following error:

Bildschirmfoto 2023-02-28 um 18 38 14

In the console you can see a list of errors, the most interesting one is in the lowest position. If we click on it we see the following results:

Bildschirmfoto 2023-02-28 um 18 39 54

I tried to find similar problems by googling it, but the only ones I found were two comments on Stackoverflow regarding the file hash key, which gets applied to the filenames and because of caching reasons the browsers expects an old hash key on the filename, which is not present anymore, because meanwhile the server already has newer files with newer hash keys (javascript - "TypeError: Failed to fetch dynamically imported module" on Vue/Vite vanilla setup - Stack Overflow). But it is only my assumption here.

So like I said, this only happens when we trigger a new build. If you see the error page und just refresh the page, the error is gone, which leads me to think about that it might be a caching problem and the cache gets also refreshed while refreshing the website.

I have opened up a similar discussion on the support forums of Hydrogen and the developers state that this is not only bound to Hydrogen. It is a general problem on Netlify and also happens e.g. on Gatsby.

I have the feeling, that the index.html file as the entry point gets cached by the servers of Netlify and the header of the file does not get updated after a new build, so the browser still uses the old file, with the old reference of an older js file, with older imports of wrong file hashes.

So any ideas to fix that?

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.