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

[lukef]

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.

[posva]

@lukef transferred to vue-cli as it seems related to how the build service is used

[posva]

I think the issue actually comes from vue-next. Someone also opened vuejs/core#2064. Closing in favor of that one because the reproduction is much simpler

[posva]

See vuejs/core#2064 (comment). You also need to make sure your lib and app are using the same vue instance because right now they are both importing Vue from different files

[lukef]

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.

[lukef]

I also tried converting my plugin to use rollup via https://github.com/team-innovation/vue-sfc-rollup (4.0-beta) and I get the exact same issue. I made sure vue is a peerDependency and that it is external as per the ticket you linked.

[alvarosabu]

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>

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