server hmr and client hmr triggered by a shared module change cause temporary inconsistent render

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

Raising as requested by @hi-ogawa

I've created a reproduction of the issue. The reproduction is where there's a module used on both the client and the server. A change to this shared module throws an error because the server rsc fetch uses the latest version of the module but the client code uses the old version of the module.

There is another way to reproduce the problem without a shared module. Edit a server module and client module at the same time. So make changes to them both without saving individually and then press save all to save them both together.

The problem in a nutshell is that the rsc fetch uses the latest code and the subsequent client render uses the old code.

Reproduction

https://github.com/grahammendick/vite-plugin-react/tree/navigation-vite/packages/plugin-rsc/examples/hmr

Steps to reproduce

The App just renders a client Item component passing in a key which It gets from 'lookup.ts'. The Item passes this key into 'lookup.ts' to get the value which it then displays. If you edit the key in 'lookup.ts' from 'a' to 'b', for example, then the hmr update throws.

export const key = 'b'

The reason for the error is that the server response uses the latest 'lookup.ts' but the client uses the old 'lookup.ts'. So the rsc response has the key 'b' but the client still has the key 'a'.

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 78.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 10.13.1 - ~/.nvm/versions/node/v22.12.0/bin/pnpm
    bun: 1.2.5 - ~/.nvm/versions/node/v22.12.0/bin/bun
    Watchman: 2024.10.07.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 138.0.7204.184
    Safari: 17.6
  npmPackages:
    @vitejs/plugin-react: latest => 4.7.0 
    @vitejs/plugin-rsc: latest => 0.4.16 
    vite: ^7.0.4 => 7.0.4

Used Package Manager

npm

Logs

No response

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.
• 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.

Start by running packages/plugin-rsc/examples/hmr and inspect the App, Item, and shared lookup.ts flow. Reproduce the failure by changing lookup.ts or saving server and client modules together. Done means server and client HMR updates render consistently without the RSC response and client code using different module versions.