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

bug with vue3 ssr and dynamic component #2863

Closed
lovetingyuan opened this issue Dec 22, 2020 · 7 comments
Closed

bug with vue3 ssr and dynamic component #2863

lovetingyuan opened this issue Dec 22, 2020 · 7 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: ssr

Comments

@lovetingyuan
Copy link

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.

@posva posva added 🐞 bug Something isn't working 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: ssr has workaround A workaround has been found to avoid the problem labels Dec 22, 2020
@posva
Copy link
Member

posva commented Dec 22, 2020

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

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

@lovetingyuan
Copy link
Author

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

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

thanks, it works

@HcySunYang
Copy link
Member

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 #3244 with your PR, you will understand what I’m talking about.

@rstoenescu
Copy link

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.

@HcySunYang
Copy link
Member

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

@theoribeiro
Copy link

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?

@TimWeidner
Copy link

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

@github-actions github-actions bot locked and limited conversation to collaborators Oct 17, 2023
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. has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: ssr
Projects
None yet
6 participants