Subscribe on changes!

Hydration mismatch when custom element contains child node

avatar
Apr 18th 2023

Vue version

3.2.47

Link to minimal reproduction

https://github.com/dritter/vue-ssr-hydration-mismatch-reproducer

Steps to reproduce

  1. git clone https://github.com/dritter/vue-ssr-hydration-mismatch-reproducer
  2. cd vue-ssr-hydration-mismatch-reproducer
  3. npm i
  4. npm run dev
  5. Look in the Browser console for hydration mismatches.

What is expected?

No hydration mismatch should occur. The custom component should be skipped in hydration.

What is actually happening?

grafik

System Info

System:
    OS: Linux 6.2 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 8.89 GB / 15.39 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 19.8.1 - /usr/bin/node
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chromium: 112.0.5615.121
    Firefox: 112.0
  npmPackages:
    vue: ^3.2.25 => 3.2.47

Any additional comments?

This does only happen, if <my-component> contains child nodes.

I discovered this in https://github.com/nuxt/nuxt/issues/20327

avatar
Jan 17th 2024

Hi! I think this problem needs more concern