question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Component library with component that is composed of another does not render the base component

See original GitHub issue

Version

3.0.0-rc.10

Reproduction link

https://github.com/lukef/vue-component-repro

https://stackoverflow.com/questions/63758716/vue-3-component-library-with-component-that-is-composed-of-another-does-not-ren

Steps to reproduce

I have included a project that will demonstrate the issue. Instructions in README.

What is expected?

<cool-component> is derived from <base-component>. My expectation is that when <cool-component> is rendered that it should also render the base component as well. That isn’t happening.

What is actually happening?

What happens is that <cool-component> is rendered but <base-component> (in this case <BaseComponent>) is not being rendered and is being translated to the literal tag <basecomponent> (no hyphen).


The console contains the following warning: [Vue warn]: resolveComponent can only be used in render() or setup().

Not really sure what I’ve done wrong with setup or whether this is a bug.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
lukefcommented, Sep 7, 2020

I still don’t see a solution to the issue in that other issue that resolves this one so I’m not really sure it is closed. I tried modifying the webpack config in my vue.config.js file to include:

vue$: path.resolve("./node_modules/vue/dist/vue.runtime.esm.js")

But this create a myriad of other issues if you’re using vuex, vue-router, etc in the consuming project.

It shouldn’t be this hard to make a component library for vue.

0reactions
alvarosabucommented, Sep 17, 2020

I’m having the same issue that @lukef in my library https://github.com/alvarosaburido/vue-dynamic-forms. If I use it on a typescript vue3 app like the. one in dev/typescript it works, but in a javascript one dev/vue, it doesn’t

The console also output the following warnings:

[Vue warn]: resolveComponent can only be used in render() or setup(). [Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) at <AsDynamicForm form= {id: "example-form", fields: Array(4)} onSubmited=fn<handleSubmit> onChanged=fn<valueChanged> ... > at <App>

Screenshot 2020-09-17 at 08 06 19

@posva Is there a workaround that doesn’t require changing to rollup?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3: Component library with component that is composed of ...
The problem is that when I use a <cool-component> component in a project, only the items inside the CoolComponent class are rendered. The ......
Read more >
Vue 3: Component library with component that is composed of ...
Coding example for the question Vue 3: Component library with component that is composed of another does not render the base component-Vue.js.
Read more >
Composition vs Inheritance - React
Composition vs Inheritance ... React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components....
Read more >
Building a React Component Library — The Right Way
Build a modular library with independently published reusable components using React, TypeScipt, Webpack, Jest, MDX. Scalable, maintainable ...
Read more >
Build a component library with React and TypeScript
js or Create React App, we have to start from scratch. To build this UI library, we'll be using the following tools: TypeScript....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found