Webpack: compilation hash changed / ChunkLoadError

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

This error occurs in Single Page Applications (SPAs) that use Webpack's code splitting feature. When a user loads your app, they download the `index.html` which points to specific JavaScript chunks (e.g., `main.a1b2.js`). If you deploy a new version of the app while the user is actively navigating, Webpack generates new chunks with new hashes (e.g., `main.c3d4.js`) and deletes the old ones from the server. When the user's browser attempts to lazy-load a new route, it asks for the old chunk hash, which returns a 404 from the server, causing a `ChunkLoadError` and breaking the app.

Fix / Solution

This is a complex deployment lifecycle issue. The most robust solution is to configure your hosting provider or CDN to keep old assets (previous build chunks) available for a transition period (e.g., 24 hours) after a new deployment. Alternatively, catch the `ChunkLoadError` at the application router level (e.g., in React Router) and force a hard page reload (`window.location.reload()`) to fetch the new `index.html` and the latest chunk manifests.

Code Snippet

// ❌ App crashes when clicking a lazy-loaded route after a deployment
const AdminDashboard = lazy(() => import('./AdminDashboard'));

// ✅ Catch ChunkLoadError globally and force a reload
window.addEventListener('error', e => {
  if (/Loading chunk [\d]+ failed/.test(e.message)) {
    window.location.reload();
  }
});