Subscribe on changes!

bug with vue3 ssr and dynamic component

avatar
Dec 22nd 2020

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.

avatar
Dec 22nd 2020

As a workaround you can specify the component options object instead of its name:

  setup() {
    return {
      view: MyTest,
    }
  },
avatar
Dec 22nd 2020

As a workaround you can specify the component options object instead of its name:

  setup() {
    return {
      view: MyTest,
    }
  },

thanks, it works

avatar
Feb 18th 2021

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

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.

avatar
Feb 18th 2021

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.

avatar
Feb 18th 2021

@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
    }
  }
}
avatar
Apr 16th 2021

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?

avatar
Jul 1st 2021

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?

Just for the record, this currently works with Vue 3.1.2