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

<component :is > fails to render component that extends a runtime template component #6249

Closed
emccorson opened this issue Jul 11, 2022 · 1 comment · Fixed by #6250
Closed
Labels
p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working

Comments

@emccorson
Copy link

emccorson commented Jul 11, 2022

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ksuhdx?file=src/components/HelloWorld.vue

Steps to reproduce

  1. Run the app
  2. Notice that nothing is rendered.
  3. Comment out HelloWorld.vue line 13 and uncomment HelloWorld.vue line 14.
  4. Notice that "I'm an SFC" now renders.

What is expected?

I have created a component extendedComponent that has the key extends to extend a compnent that uses a runtime template:

const baseComponentRuntimeTemplate = {
  template: `<p>I'm a component</p>`,
};

const extendedComponent = {
  extends: baseComponentRuntimeTemplate
};

And I am trying to render it with <component :is="extendedComponent"></component>.

I expected that this would render baseComponentRuntimeTemplate's template in the app.

What is actually happening?

Nothing renders.

System Info

No response

Any additional comments?

It seems to work fine when the base component is an SFC, but if the base component uses a runtime template, it does not work.

I created the reproduction link on StackBlitz because I needed to enable runtime compilation of templates.

@edison1105
Copy link
Member

edison1105 commented Jul 11, 2022

BTW, you should markRaw for component.

export default {
  data() {
    return {
      component: markRaw(extendedComponent),
    };
  },
};

@edison1105 edison1105 added 🐞 bug Something isn't working p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Jul 11, 2022
emccorson added a commit to OnsenUI/OnsenUI that referenced this issue Jul 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants