Weird SSR hydration error for no good reason
Vue version
3.2.39
Link to minimal reproduction
https://github.com/AaronBeaudoin/weird-vue-hydration-bug
Steps to reproduce
npm install
.npm run dev
.- Go to
/
. Open devtools. - Note the hydration error.
- Comment the "WTF" element in
src/App.vue
on line 6. - Refresh the page.
- Note that the hydration error is gone.
- WTF.
What is expected?
No hydration errors.
What is actually happening?
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Static)
- Server rendered DOM: <!--[--> (start of fragment)
at <App>
warn2 @ runtime-core.esm-bundler.js:38
runtime-core.esm-bundler.js:4593 Hydration completed but contains mismatches.
### System Info
```shell
System:
OS: macOS 12.5
CPU: (10) arm64 Apple M1 Pro
Memory: 133.70 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.17.0 - ~/.volta/tools/image/node/16.17.0/bin/node
npm: 8.15.0 - ~/.volta/tools/image/node/16.17.0/bin/npm
Browsers:
Chrome: 105.0.5195.102
Safari: 15.6
npmPackages:
vue: ^3.2.39 => 3.2.39
Any additional comments?
No response
Playground reproduction:
It seems to be caused by the static node, so the exact point it breaks feels a bit magical because that's the point where there's enough static content to trigger a static node.
I'd like to challenge the classification of this issue as a "minor" bug, because:
- Since it's not exactly clear what specific HTML triggers the issue, it's also not clear how to get around it. I'm stuck just trying random changes until I land on something that works, if possible. This totally sucks.
- If I can't figure out how to get rid of the hydration error, then other real hydration issues in my project are potentially getting hidden behind this one, which also totally sucks.
Bottom line, I don't really have a concrete workaround for this, so it's depressing to be looking at potentially waiting months to see any progress on it.