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

[grahammendick]

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.

[hi-ogawa]

Thanks for the concise repro! I took a look and, interestingly, shared module hmr is almost working fine except server hmr and client hmr don't happen at the exact same render cycle, so there can be a mismatch just temporarily. I've added several test cases where it checks "eventual update" on both side and "non atomic update" in #671.

I tested Next.js and it also has the same behavior https://github.com/hi-ogawa/reproductions/tree/main/next-rsc-hmr-shared-module, so for now I might leave this scenario as an edge case. I remember you have Parcel and Webpack examples on navigation, so I'm curious how they work with shared module update. Do you know how they work this out differently?

[grahammendick]

The Parcel example works with the shared module update. I don't know what it does differently to Vite.

The Webpack example works for a few goes. Not sure why if fails after that, but React abandoned the weback rsc implementation so I'm not bothered with investigating.