SPA fallback broken on LAN IP in dev with @cloudflare/vite-plugin enabled

[kernpinoy]

Which Cloudflare product(s) does this pertain to?

Vite Plugin

What versions & operating system are you using?

• OS: Arch Linux,
• Node.js: 23.11.0
• Bun: 1.2.10,
• Vite: 6.3.4,
• @cloudflare/vite-plugin: 1.0.13
• @tanstack/router-plugin: 1.117.2

Please provide a link to a minimal reproduction

https://github.com/kernpinoy/issue

Describe the Bug

When developing a React SPA with Vite and the @cloudflare/vite-plugin, direct navigation to non-root routes (e.g., /home) via the local network IP (e.g., http://10.0.0.25:5173/home) results in a 404 error. This only occurs when the Cloudflare Vite plugin is enabled. The issue does not occur when accessing the same route via localhost, nor does it occur when the Cloudflare plugin is disabled.

---

Steps to Reproduce

1. Create a Vite React project with the following plugins:
   • @vitejs/plugin-react-swc
   • @cloudflare/vite-plugin
   • @tanstack/router-plugin/vite
2. Start the dev server with:

   bun run dev -- --host
   # or
   vite --host

3. On another device on the same network, navigate to http://<your-ip>:5173/home (replace <your-ip> with your machine’s LAN IP).
4. Observe that a 404 error is returned.
5. Comment out or remove the @cloudflare/vite-plugin from vite.config.js.
6. Restart the dev server and repeat step 3.
7. The route now loads as expected.

---

Expected Behavior

• Navigating directly to any client-side route (e.g., /home) via the LAN IP should load the SPA and render the correct page, just as it does when using localhost.

---

Actual Behavior

• Navigating directly to a client-side route via the LAN IP returns a 404 error when the Cloudflare Vite plugin is enabled.

---

Additional Notes

• The issue does not occur when using localhost.
• The issue does not occur when the Cloudflare plugin is disabled.
• Clicking links within the app (client-side navigation) works as expected.
• This behavior breaks mobile and cross-device testing in development.

Screen recordings

• Mobile screenrec
• PC screenrec

Please provide any relevant error logs

I was unable to get error logs as there was none. Sorry.

[petebacondarwin]

Tanstack router is not yet compatible with the Cloudflare Vite plugin I believe.
We hope that this can be rectified this year but meanwhile this is something that mostly needs to be addressed in the TanStack code since it needs to be compatible with Vite 6 Environment API.

[jamesopstad]

I think you're thinking of TanStack Start, @petebacondarwin. TanStack Router should work fine.

@kernpinoy, the link to your reproduction doesn't work. Please could you update it? Could you also let us know what browser you are using on both devices? I suspect this may be related to support for the Sec-Fetch-Mode header (https://caniuse.com/?search=sec-fetch-mode). Thanks.

[kernpinoy]

Apologies for the late reply. The Github link is already updated and as for the browser. I am both using Brave and Chrome in PC and mobile.

[jamesopstad]

Thanks for the reproduction. We've identified that the cause of the issue is that browsers don't send the Sec-Fetch-Mode header for insecure cross-origin requests. As the asset handling currently uses this header to determine whether to return the fallback index.html route, it doesn't work as expected. Apologies about this. We are considering a way to opt out of the Sec-Fetch-Mode handling, which would fix this.

In the meantime, the best way to develop using the LAN IP address is to enable HTTPS. The easiest way to do that is with the @vitejs/plugin-basic-ssl package.

[kernpinoy]

I see. Thanks! I'll try your suggestions, see if that works. Thanks again!