Hard refresh leading to 404 error when using `vite --host` with Vite + Hono + Cloudflare Worker template

[KyleRicardo]

Which project does this relate to?

Router

Describe the bug

Hi community,
I'm using https://github.com/cloudflare/templates/tree/main/vite-react-template to create a project.
And try to introduce tanstack router in it, for file-based routing.
Since I'm building an mobile-first app, so I need to test in my real phone.
I used pnpm dev --host i.e. vite --host to expose network access from my computer, so that my phone can use my computer's IP and port to visit the website.
However, when I visit the network address, and route to the about page, and then do a hard refresh (press F5), the app throws a 404 error.
But when using localhost:5173, there's no such problem. Only using the IP will cause this problem.

Since this template involves Vite + React + Cloudflare Workers + Tanstack Router, I really have no idea which part is causing this problem.
Can you help me troubleshoot this issue? Thank you so much.

Your Example Website or App

https://github.com/KyleRicardo/vite-tanstack-router-template

Steps to Reproduce the Bug or Issue

1. Clone my minimal reproduction repo.
2. You may need to delete pnpm-lock.json first to get Cloudflare's workerd working for your machine's arch.
3. Run pnpm install
4. Use pnpm dev --host to start dev server
5. Use <your_local_ip>:5173 to visit the dev website
6. Use the about button to navigate to about page
7. Refresh the page, and you will get 404 Not Found error message

Expected behavior

When directly visiting localhost:5173/about, the page works fine.
But directly visiting <your_local_ip>:5173/about, will get 404 Not Found error page.
The behavior should be exactly the same.

Screenshots or Videos

Localhost:

Using Local IP (vite --host)

Platform

• Router / Start Version: 1.141.6
• OS: macOS, Windows
• Browser: Chrome
• Browser Version: 143.0.7499.41
• Bundler: Vite
• Bundler Version: 6.0.0 (7.3.0 tested, also same issue)

Additional context

I tried using pnpm preview --host, also get same 404 not found error, so I wonder if this is vite's issue. I may raise an issue there and cross ref this one. Thanks.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

#5650 - fix: fix static server functions [merged]
#5829 - docs(solid-router): add with-trpc example [merged]
#5847 - docs(solid-start): start-large example [merged]

👤 Suggested Assignees

• birkskyum
• brenelz

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[KyleRicardo]

Can see also vitejs/vite#21314 and honojs/hono#4585

[dancaprima]

@KyleRicardo I don’t think this is the router issue. The problem seems to be a misconfiguration in the cloudflare vite plugin. When the plugin is enabled, it breaks the flow, but once it’s commented out, everything works as expected.