Auto-reload page when Webpack chunks are outdated

Question

I have an app bundled with Webpack.

There is a main bundle file and the rest of the code is split into chunks per screen. Both the main bundle and chunks are generated with a hash as part of the file name.

...
filename: '[name]-[hash].js',
chunkFilename: '[id].[name]-[hash].js'
...

After deploying new changes to production the bundle and chunk files are replaced (so, old ones are removed).

If a user has the app open and tries to navigate to a page that is supposed to load an outdated chunk, part of the application crashes.

The question: Is there a way to detect failure to load a chunk and auto reload the screen or present an appropriate message?

What kind of strategy is advisable?

Thanks.

Answer 1

I would use runtime chunks so that each entry chunk does not embed a runtime. This should translate to being able to "plug-and-play" chunks in production.