Page Breaks When Refreshing with Chrome DevTools Open

[GOKORURI007]

Describe the bug

I just ran following commands:

$ pnpm create vite@latest test_vite
│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in D:\MyProjects\pyquanter\test_vite...
│
└  Done.

$ cd test_vite
$ pnpm install
$ pnpm run dev --open

After that, the chrome is open and the page show correctly.
But when I open the chrome devtool (by F12) and refresh the page, page is broken and the console show following error.
If i refresh the page after close the devtool, everything works well.

GET http://localhost:5173/@id/__x00__virtual:react-router/browser-manifest net::ERR_ABORTED 404 (Not Found)
localhost/:1 
            
GET http://localhost:5173/node_modules/.pnpm/@[email protected]_@re_92db570b1020c34e56e9a36d76b93bf4/node_modules/@react-router/dev/dist/config/defaults/entry.client.tsx net::ERR_ABORTED 404 (Not Found)
localhost/:1 
                        
GET http://localhost:5173/app/root.tsx net::ERR_ABORTED 404 (Not Found)
localhost/:1 
                        
GET http://localhost:5173/@id/__x00__virtual:react-router/inject-hmr-runtime net::ERR_ABORTED 404 (Not Found)
localhost/:453 

Reproduction

Can not reproduce by vite.new

Steps to reproduce

1. Init project

$ pnpm create vite@latest test_vite
│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in D:\MyProjects\pyquanter\test_vite...
│
└  Done.

$ cd test_vite
$ pnpm install
$ pnpm run dev --open

2. Open chrome devtool by F12
3. Refresh page by F5

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 40.18 GB / 63.59 GB
  Binaries:
    Node: 22.14.0 - D:\ScoopApps\apps\nodejs-lts\current\node.EXE
    npm: 10.9.2 - D:\ScoopApps\apps\nodejs-lts\current\npm.CMD
    pnpm: 10.5.1 - D:\ScoopApps\shims\pnpm.EXE
    bun: 1.2.0 - ~\AppData\Local\reflex\bun\bin\bun.EXE
  Browsers:
    Chrome: 133.0.6943.142
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    vite: ^6.2.0 => 6.2.0

Used Package Manager

pnpm

Logs

Click to expand!

  vite:html-fallback Rewriting GET / to /index.html +11s
  vite:cache [memory] /src/main.ts +11s
  vite:time 2.67ms /index.html +11s
  vite:html-fallback Rewriting GET /@id/__x00__virtual:react-router/browser-manifest to /index.html +40ms
  vite:time 0.80ms /index.html +38ms
  vite:html-fallback Rewriting GET /node_modules/.pnpm/@[email protected]_@re_92db570b1020c34e56e9a36d76b93bf4/node_modules/@react-router/dev/dist/config/defaults/entry.client.tsx to /index.html +1ms
  vite:time 1.35ms /index.html +1ms
  vite:html-fallback Rewriting GET /app/root.tsx to /index.html +2ms
  vite:time 1.53ms /index.html +3ms
  vite:html-fallback Rewriting GET /@id/__x00__virtual:react-router/inject-hmr-runtime to /index.html +116ms
  vite:time 0.64ms /index.html +115ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

I cannot reproduce and It looks odd that the request like virtual:react-router showing up while you selecting "Vanilla" template. Do you maybe have other projects with react router running somewhere with service worker / pwa cache? Can you try it in chrome incognite window?

[github-actions[bot]]

Hello @GOKORURI007. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[GOKORURI007]

• The minimal reproduction is provided here
• The Opera and Microsoft Edge browser does not meet the same problem