Description
Vue version
3.5.6
Link to minimal reproduction
https://stackblitz.com/edit/github-1yeqp6?file=src%2Fcomponents%2FMyComponent.vue
Steps to reproduce
Run the project
See that there is no hydration mismatch issues on load (and reload if you wish).
Trigger a HMR update, by updating the script tag in MyComponent.vue (my go to is suffixing an 'a' to the console.log statement) and see the hydration mismatch warning, the Hydration completed but contains mismatches-error and notice that 'My component' is no longer visible.
Also notice you can trigger a HMR update in the MyKeepAliveContainer.vue component without getting the warning.
What is expected?
Hydration mismatch errors should be consistent with the code, not happen based on what file triggers an HMR update.
What is actually happening?
Hydration acts differently between different files and throws and error i don't think should be there.
However this only seems to happen if you use useId in a component, inside a component wrapping it in a <KeepAlive/>-tag.
System Info
System:
OS: macOS 13.6.3
CPU: (12) arm64 Apple M2 Pro
Memory: 122.17 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
Browsers:
Safari: 16.6
Chrome 130.0.6723.59 (Official Build) (arm64)Any additional comments?
Initially ran into it in a Nuxt project and reported it there, but @danielroe pointed out it seems to be a Vue issue.