Skip to content

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

@CKanishka

Description

@CKanishka

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions