bug with vue3 ssr and dynamic component
Version
3.0.4
Reproduction link
https://github.com/lovetingyuan/vue3-ssr-dynamic-component-bug
Steps to reproduce
see github repo readme.md: https://github.com/lovetingyuan/vue3-ssr-dynamic-component-bug#vue3-ssr-dynamic-component-bug
run yarn build:ssr
and node dist-ssr/_assets/server-main
[Vue warn]: resolveComponent can only be used in render() or setup().
vue server render: <!--[--><header><img alt="Vue logo" src="/_assets/logo.3b714202.png"></header><main><MyTest></MyTest></main><footer> thanks vue3 </footer><!--]-->
As you can see, component MyTest
is not rendered as expect.
But if I remove TopHeader
in App.vue
, the ssr result is correct.
What is expected?
each component can be resolved and rendered to html string.
What is actually happening?
One component is not be resolved and parsed correctly.
As a workaround you can specify the component options object instead of its name:
setup() {
return {
view: MyTest,
}
},
As a workaround you can specify the component options object instead of its name:
setup() { return { view: MyTest, } },
thanks, it works
This issue provides more easier reproduction.
@edison1105 , thanks for your PR first, but your PR didn't fix the root cause. As I said here
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 thessrRender
function:
ssrRender() {
// it's equivalent to calling `ssrRender` recursively
ssrRenderComponent(Comp)
// here, the `currentRenderingInstance` will be `null`
// so resolving component will fail
resolveDynamicComponent(xxx)
}
what we need to do is to ensure that the currentRenderingInstance
is correct, not to prevent it from being set to null
, otherwise, we cannot ensure that the subsequent resource resolution will be correct, e.g the resolveDynamicComponent
.
And you can test https://github.com/vuejs/vue-next/issues/3244 with your PR, you will understand what I’m talking about.
Hello. First of all, thank you for your work on the issue. Since my report has been closed as duplicate of this one, I suggest you also bump the importance of the bug (currently set as p3-minor) and remove the "has workaround" tag.
@rstoenescu A workaround for your report:
// Home.vue
const ComponentA = {
setup () {
return () => h('div')
}
}
const MyX = {
setup () {
return () => h('div')
}
}
export default {
setup () {
return {
myComponentName: ComponentA
}
}
}
Thanks for the effort @chrislone @yyx990803. This issue was closed by your PR, however, the original repro still doesn't work even after updating to 3.0.11. Has this been published?