ChunkLoadError: Loading chunk 5 failed

The browser couldn’t download a code-split chunk. Usually a deployment or caching issue.

Why this happens

When you deploy a new version, old chunk filenames are replaced with new ones. Users who still have the old HTML cached try to load chunks that no longer exist on the server, resulting in 404s. This also happens with aggressive CDN caching, network interruptions, or ad blockers interfering with script loading.

Fix 1: Hard refresh

Ctrl + Shift + R (Windows/Linux)
Cmd + Shift + R (Mac)

Fix 2: Clear old chunks on deploy

Make sure your deployment doesn’t delete old chunks before users have reloaded:

window.addEventListener('error', (e) => {
  if (e.message.includes('Loading chunk')) {
    window.location.reload();
  }
});

Fix 3: Check your CDN/hosting

Make sure all chunk files are being served. Check the network tab for 404s.

Fix 4: Use content hashes

// webpack.config.js
output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js',
}

Alternative solutions

Use import() with error handling to gracefully retry failed chunk loads:

function loadWithRetry(fn, retries = 3) {
  return fn().catch((err) => {
    if (retries > 0) return loadWithRetry(fn, retries - 1);
    throw err;
  });
}
const MyComponent = lazy(() => loadWithRetry(() => import('./MyComponent')));

Prevention

• Keep old chunks available for at least 24 hours after deployment so cached HTML can still load them.
• Use contenthash in all output filenames to ensure unique URLs per build.

Related resources

• Vite vs Webpack
• JavaScript complete guide

Related: Webpack: Module Not Found — Can’t Resolve · Unexpected Token in JSON fix