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

[ssr] Hydration error with <component :is="someVar"> #3244

Closed
rstoenescu opened this issue Feb 16, 2021 · 3 comments
Closed

[ssr] Hydration error with <component :is="someVar"> #3244

rstoenescu opened this issue Feb 16, 2021 · 3 comments
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working scope: ssr

Comments

@rstoenescu
Copy link

Version

3.0.5

Reproduction link

https://github.com/rstoenescu/vue3-ssr-bug-component-is

Steps to reproduce

  1. yarn
  2. yarn dev
  3. Check browser console:
[Vue warn]: Hydration node mismatch:
- Client vnode: div
- Server rendered DOM: <componenta>​</componenta>​
  at <ComponentA>
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
  at <RouterView>
  at <App>

Also check terminal output:

[Vue warn]: resolveComponent can only be used in render() or setup().
  1. Remove <my-x /> from template OR replace it with <div />. Notice no hydration error.

What is expected?

No hydration error.

What is actually happening?

Hydration error when another component is placed as sibling of <component :is="...">

@HcySunYang
Copy link
Member

Add notes here.

May need an instance stack: https://github.com/vuejs/vue-next/blob/master/packages/server-renderer/src/render.ts#L146-L158.

It is problematic to execute the ssrRenderComponent function within the ssrRender function:

ssrRender() {
  // it's equivalent to calling `ssrRender` recursively
  ssrRenderComponent(Comp)
  // here, the `currentRenderingInstance` will be `null`
  // so resolving component will fail
  resolveDynamicComponent(xxx)
}

@HcySunYang HcySunYang added the ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. label Feb 17, 2021
@edison1105
Copy link
Member

duplicate of #2863

@HcySunYang
Copy link
Member

Closed because of duplicate

@github-actions github-actions bot locked and limited conversation to collaborators Oct 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working scope: ssr
Projects
None yet
Development

No branches or pull requests

4 participants