react code_splitting_error ai_generated true

Error: Loading chunk X failed. (missing: https://example.com/static/js/chunk.hash.js)

ID: react/react-lazy-loading-failed

Also available as: JSON · Markdown
84%Fix Rate
87%Confidence
110Evidence
2022-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

React.lazy() dynamic import failed because the chunk file is not available. Common after deployments that change chunk hashes, network failures, or incorrect publicPath configuration.

generic

Workarounds

  1. 88% success Wrap React.lazy components in an Error Boundary that retries or reloads the page 
    Catch the ChunkLoadError in an Error Boundary and call window.location.reload() or retry the import: const LazyComp = React.lazy(() => import('./Comp').catch(() => import('./Comp')));

    Sources: https://react.dev/reference/react/lazy https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

  2. 90% success Ensure old chunks remain available after deployment (keep previous build artifacts on CDN) 
    Configure deployment to retain previous build outputs for at least 24 hours. In AWS S3/CloudFront: do not delete old files on deploy. In Vercel/Netlify: this is handled automatically.

    Sources: https://webpack.js.org/guides/caching/

Dead Ends

Common approaches that don't work:

  1. Disable code splitting entirely to avoid chunk loading 75% fail

    Results in a single massive bundle, destroying load performance. Does not fix the underlying deployment or CDN issue.

  2. Add aggressive caching headers to chunk files 65% fail

    Caching old chunks worsens the problem after deployments; users get stale chunks that reference other stale chunks

Error Chain

Leads to:
Preceded by:
Frequently confused with: