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

[rstoenescu]

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().

4. 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]

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)
}

[edison1105]

duplicate of #2863

[HcySunYang]

Closed because of duplicate