Skip to content

Hydration mismatch when using v-if="false" in nested <slot> of external component #11326

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

Closed
zzddlalala opened this issue Jul 10, 2024 · 0 comments · Fixed by #11491
Closed

Hydration mismatch when using v-if="false" in nested <slot> of external component #11326

zzddlalala opened this issue Jul 10, 2024 · 0 comments · Fixed by #11491
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: slots scope: ssr

Comments

@zzddlalala
Copy link

zzddlalala commented Jul 10, 2024

Vue version

3.4.27

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-s8nc2r?file=app.vue

Steps to reproduce

Just run the nuxt app, and you can see the warning in console.
image

It seems that the ssr render output for code <div v-if="false">test</div> is wrong, and the output is <div><!--[--><!--v-if--><!--]--></div>, which contains more child nodes than client vdom(<div><!--[--><!--]--></div>).

This warning only occured when i use external component(ex. of element-ui). However, it is normal when i use a local component, even if the local compnent is same as the external one completely.

What is expected?

Fixing the warning of hydration mismatch, the ssr render output shouldn't include <!--v-if-->?

What is actually happening?

Hydration mismatch, ssr render output <div><!--[--><!--v-if--><!--]--></div>

System Info

No response

Any additional comments?

Maybe this issue is similar to #5834.

@edison1105 edison1105 added scope: slots scope: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Aug 5, 2024
yyx990803 pushed a commit that referenced this issue Aug 7, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix #11326
@github-actions github-actions bot locked and limited conversation to collaborators Aug 22, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: slots scope: ssr
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants