Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

isModuleNotFoundError does not detect Rspack/Webpack ChunkLoadError, breaking lazy route auto-reload after deploy

Aperta Adatta ai principianti
  • Qualcosa non va?
#7,633 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

  • #7653 di @sijie-Z — chiusa senza merge

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
typescript, webpack
Ambito
frontend

Direzione di ricerca

Inizia in packages/router-core/src/utils.ts leggendo isModuleNotFoundError(), quindi segui il suo utilizzo in packages/react-router/src/lazyRouteComponent.tsx. Riproduci il caso di un chunk obsoleto con la demo collegata usando pnpm build e pnpm preview. Il lavoro è completato quando il comportamento esistente di ricaricamento una tantum gestisce anche il caso segnalato di ChunkLoadError senza compromettere i controlli esistenti per i moduli non trovati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Which project does this relate to?

Router

Describe the bug

TanStack Router already has built-in stale-deploy recovery in lazyRouteComponent: when a lazy route chunk fails to load, it calls isModuleNotFoundError() and, if true, performs a one-time sessionStorage-guarded window.location.reload().

That works for native ESM / Vite-style dynamic import failures, but not for Rspack/Webpack ChunkLoadError errors thrown after a deploy when a user still has an old bundle open.

In that case, navigating to a code-split route throws an error like:

ChunkLoadError: Loading chunk 123 failed.
(error: http://localhost:3333/js/123.abc123.chunk.js)

isModuleNotFoundError() in @tanstack/router-core only checks Vite/native ESM message prefixes today, so the reload path in lazyRouteComponent is never triggered and the navigation fails permanently until the user manually refreshes.

Relevant upstream code:

  • packages/router-core/src/utils.ts — isModuleNotFoundError()
  • packages/react-router/src/lazyRouteComponent.tsx — reload-on-module-missing behavior
Complete minimal reproducer

https://github.com/CKanishka/tsr-chunk-reload-demo

The repo has two branches:

  • main — vanilla @tanstack/[email protected] (broken behavior)
  • fix/chunk-load-retry — proposed patch extending isModuleNotFoundError (working behavior)
Steps to Reproduce the Bug
  1. On main, run pnpm build then pnpm preview
  2. Open http://localhost:3333 and stay on Home (do not refresh)
  3. Edit any lazy route file (e.g. src/components/SettingsPage.tsx) and run pnpm build again to simulate a deploy with new chunk hashes
  4. Without refreshing the browser tab, click Settings
Expected behavior

As a user with a stale tab open after a deploy, I expected TanStack Router's existing lazy-route reload behavior to detect the missing chunk and perform one automatic full-page reload, then load the route successfully.

This is the behavior already implemented in lazyRouteComponent for Vite-style module-not-found errors.

Actual behavior
  • Console shows ChunkLoadError: Loading chunk … failed
  • Route does not load
  • No automatic reload occurs
  • User must manually refresh the page

On the reproducer's fix/chunk-load-retry branch (same steps, after pnpm install), the page reloads once and navigation succeeds.

Screenshots or Videos

Before the fix

https://viddynest.com/v/jh9_ibAHXi

After the patch fix
https://viddynest.com/v/jh9_ibAHXi

Platform
  • Router / Start Version: @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected]
  • OS: macOS (also applicable to any OS/browser combo using Rspack/Webpack)
  • Browser: Chrome (ChunkLoadError format is bundler-specific; same class of failure occurs with Webpack/Rspack)
  • Browser Version: latest
  • Bundler: Rspack
  • Bundler Version: 1.7.3
Additional context

Root cause

Current isModuleNotFoundError() only matches:

  • Failed to fetch dynamically imported module
  • error loading dynamically imported module
  • Importing a module script failed

Rspack/Webpack instead throws ChunkLoadError with messages starting with Loading chunk.

Proposed fix

Extend isModuleNotFoundError() to also recognize:

  • error.name === 'ChunkLoadError'

A minimal patch demonstrating the fix is included on the fix/chunk-load-retry branch of the reproducer repo (patches/@[email protected]).

Happy to open a PR upstream if this approach looks good.

Lingua principale
TypeScript
Stelle
15.1k
Fork
1.9k
Merge medio
1g 14h
PR unite (30g)
127

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/router

Tutte le issue di TanStack/router

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.