Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(ssr): slot tag without default value will render different result between server and client #5728

Closed
zhangyuang opened this issue Apr 15, 2022 · 0 comments
Labels
feat: ssr 🐞 bug Something isn't working

Comments

@zhangyuang
Copy link
Contributor

zhangyuang commented Apr 15, 2022

Version

3.2.33

Reproduction link

github.com

Steps to reproduce

1、git clone https://github.com/zhangyuang/vue-ssr-slot-bug.git
2、pnpm i && pnpm start:vite

What is expected?

Hydrate succeed

What is actually happening?

runtime-core.esm-bundler.js:4072 Hydration completed but contains mismatches

image

If i have a slot component hope render fallback value if parent don't provide any slot content,

<template>
  <slot>
    {{ title }}
  </slot>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'

const props = defineProps<{
  title?: string,
}>()
const title = ref(props.title)
</script>

But if parent don't provide props.title to slot will cause hydrate error

<template>
  <div class="foo">
    <Foo />
  </div>
</template>

<script lang="ts" setup>
import Foo from './slot.vue'
</script>

With debug in source code, when hydrate dom, the server side node be regard as fragment but in the client side , the slot.vue will be compile text node which cause mismatch。

ref:
https://github.com/vuejs/core/blob/main/packages/runtime-core/src/hydration.ts#L108

@zhangyuang zhangyuang changed the title slot tag without default value will render different result between server and client bug(ssr): slot tag without default value will render different result between server and client Apr 15, 2022
@yyx990803 yyx990803 added feat: ssr 🐞 bug Something isn't working labels May 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: ssr 🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants