TanStack / TanStack/router

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

Open Beginner friendly
#7,633 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

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.tsisModuleNotFoundError()
  • 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/router-core@1.167.1 (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/react-router@1.167.1, @tanstack/router-core@1.167.1, @tanstack/router-plugin@1.166.10
  • 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/@tanstack__router-core@1.167.1.patch).

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/router-core/src/utils.ts by reading isModuleNotFoundError(), then trace its use in packages/react-router/src/lazyRouteComponent.tsx. Reproduce the stale-chunk case with the linked demo using pnpm build and pnpm preview. Done means the existing one-time reload behavior also handles the reported ChunkLoadError case without breaking the existing module-not-found checks.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.