Strange comments in SSR renderer output and hydration mismatch warning
Vue version
v3.2.41
Link to minimal reproduction
Steps to reproduce
- Open the repro link (it contains simplest app with one child component containing one DOM node)
- You will see a warning banner "Hydration completed but contains mismatches." and message in browser console:
VM5971 about:srcdoc:160 [Vue warn]: Hydration node mismatch:
- Client vnode: h1
- Server rendered DOM: <!---->
at <InnerComponent>
at <Repl>
What is expected?
The fact that hydration will occur without errors.
Either there should be no comments in the SSR rendering output, or when hydrating on the client comments should be expected in the places indicated by the warning.
What is actually happening?
I see hydration warning in console.
System Info
System:
OS: macOS 12.5.1
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 766.59 MB / 32.00 GB
Shell: 5.8 - /usr/local/bin/zsh
Binaries:
Node: 16.17.1 - /usr/local/opt/node@16/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.15.0 - /usr/local/opt/node@16/bin/npm
Browsers:
Chrome: 107.0.5304.87
Firefox: 97.0.1
Safari: 15.6.1
Any additional comments?
The problem does not reproduce if you use <script setup>
(see example).
I think it is not a bug, because here is good. Maybe the playground had a bug.
I tried to start a playground server locally and also good: