Subscribe on changes!

Strange comments in SSR renderer output and hydration mismatch warning

avatar
Nov 2nd 2022

Vue version

v3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV____SSR__eNqlUsFuwjAM/ZUol4JEE7HtVEWIaaf9Qy4dNaMbcSMnZZNQ/31uaBkUaRLaJZHtZz8/20f57L06tCALaSI4vy8jrCzaaF4RgV4a5xsEjCujJw6LRl9moAkbqn0fqBlDURxFBdsa4ZwjOrGlxomMCbMz7LrugFATur5HTrEI3ymJK5ftPv2XDLOjRSGwdFCIjKVli97ejOFQiAQQE9KE6tIbILZ+Nh9xxCbhaHUJZ7Gb9+oHvXIhT0pyV3r1ERrkYaYEOwSClWdiK1lJb1u5i9GHQusW/ee74ib1mmOaWoy1g7xq3PpRPainpa7qEC/9CoLL36j5CkDMaGVqfSiu2XkAygmwAgL6k2yCvSKcxG5Ix2HwAG6XNTkoIcxuuUqw33UYzb7/39FdR3Hd6ek+7t+5Rdn9AL2UI2A=

Steps to reproduce

  1. Open the repro link (it contains simplest app with one child component containing one DOM node)
  2. 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).

avatar
Nov 3rd 2022

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:

image
avatar
Nov 3rd 2022

@zhangzhonghe I also found it. the currentRenderingInstance got undefined when I debugged and the code jump into the runtime-dom module in the SFC playground. It's weird.

Please provide a fresh local repro if you can reproduce this problem.