TanStack
Top-Level Optional Route Parameter Breaks HMR in Network Mode
Which project does this relate to?
Router
Describe the bug
When using a top-level optional route parameter (e.g., /{-$locale}/), Vite HMR requests (like /@react-refresh) are incorrectly matched by the route in development mode when accessed via network IP instead of localhost. This breaks HMR when developing on non-localhost addresses.
Your Example Website or App
https://github.com/djobbo/tanstack-start-top-level-optional-route-param-repro
Steps to Reproduce the Bug or Issue
-
Install dependencies:
bun install -
Start dev server with network access:
bun devThis runs:
vite dev --host --port 3000The server will be accessible at both:
http://localhost:3000http://[YOUR_IP]:3000(e.g.,http://192.168.1.100:3000)
-
Test localhost (working):
- Navigate to
http://localhost:3000/en - Open server console
- Observe: Only one log:
locale: en✅
- Navigate to
-
Test network IP (broken):
- Navigate to
http://192.168.1.100:3000/en(use your actual IP) - Open server console
- Observe: Multiple logs including
locale: @react-refresh❌ - HMR will not work
- Navigate to
Expected behavior
- Special Vite dev server paths (e.g.,
/@react-refresh, etc.) should not be matched by the route. - HMR should work consistently regardless of whether the app is accessed via
localhostor network IP
Screenshots or Videos
No response
Platform
- Router / Start Version: 1.132.0
- OS: macOs & Linux (Debian 12)
- Browser: Chrome
- Browser Version: 142.0.7444.135
- Bundler: vite
- Bundler Version: 7.2.4
Additional context
I'm using top-level optional route parameters for i18n where routes like /, /en, /fr, etc. all need to work. This issue makes network development (testing on other devices or remote environment) impractical.
this has nothing to do with optional path params, this is caused by the nitro vite plugin in dev commenting out the nitro vite plugin makes it work
cc @pi0
