Subscribe on changes!

Using <component :is="'style'" type="text/css"> with slots produces hydration mismatch in vue + ssr (vue+vite works fine)

avatar
Sep 26th 2023

Vue version

3.2.25

Link to minimal reproduction

https://stackblitz.com/edit/github-tzgxfc?file=src%2Fpages%2FHome.vue

Steps to reproduce

  1. Create a new project based on the ssr example from nuxt contribution: https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter
  2. Add a component that has slots with a <component :is="'style'" type="text/css"> tag.
  3. Add usage of the new component.
  4. Warning in console

What is expected?

I expect the same behaviour as in vue2.

What is actually happening?

A warning is shown about hydration mismatch. image

System Info

(from stackblitz)
  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.2.25 => 3.3.4

Any additional comments?

Originally opened an issue on nuxt: https://github.com/nuxt/nuxt/issues/23323 I do understand that this is a very particular edgecase.

avatar
Sep 26th 2023

duplicate of #7775

avatar
Sep 27th 2023

WAIT! thats the reason for the issue?! THats weird