Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#7,633 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

  • #7653 de @sijie-Z — cerrado sin fusionar

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
typescript, webpack
Área
frontend

Línea de trabajo

Comienza en packages/router-core/src/utils.ts leyendo isModuleNotFoundError() y luego rastrea su uso en packages/react-router/src/lazyRouteComponent.tsx. Reproduce el caso de un chunk obsoleto con la demo enlazada usando pnpm build y pnpm preview. Se considera completado cuando el comportamiento existente de recarga única también gestione el caso reportado de ChunkLoadError sin romper las comprobaciones existentes de módulo no encontrado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
15.2k
Forks
1.9k
Merge medio
1 d 12 h
PR fusionados (30 d)
69

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/router

Todos los issues de TanStack/router

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.