change the react refresh url from `/@refresh-runtime`

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Description

in our application (tanstack start), there is an ssr route on /@{username} to show a user's profile, and the vite react plugin uses /@react-refresh without any trailing data. this causes the routes to conflict.

we never noticed this, because on localhost the browser sends Sec-Fetch-Dest: script, which vite uses to resolve the conflict. but in my current bug search, i am using the site from my phone in dev-mode, using the non-localhost http://169.254.x.x, which will not send these headers. the app now fails to run any client-side javascript since the script fetches "404 user not found" as HTML.

Suggested solution

• change /@refresh-runtime to something else harder to collide with
  • perhaps /node_modules/@vitejs/plugin-react/dist/refresh-runtime.js to better reflect where the file is coming from
  • changeable with a configuration (my initial thought but i think the detailed path is better

Alternative

perhaps it should be configurable in vite to add a full prefix to the specifiers.

Additional context

i have a workaround (deleting the profile page temporarily) but would love this for coworkers that may need to perform a similar type of debug.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Start by inspecting the refresh-runtime handling in packages/plugin-react, packages/plugin-react-swc, and packages/plugin-react-oxc, then reproduce the conflict with an SSR route such as /@{username} without Sec-Fetch-Dest headers. Done means the React refresh request no longer collides with application routes across the checked plugins and client-side JavaScript still loads in dev mode.