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

user_353463 0
Viewed 1183

I logged an issue but, it also seems likely it's just something I'm doing wrong ..

I have a component (CoolComponent or <cool-component>) that I have defined inside a library and that is derived from another component (BaseComponent or <base-component>).

CoolComponent.vue looks like:

<template>
  <div class="cool-component">
    <BaseComponent message="This is the message">
      <template v-slot:something>
        This is something!!
      </template>
    </BaseComponent>
  </div>
</template>

The problem is that when I use a <cool-component> component in a project, only the items inside the CoolComponent class are rendered. The BaseComponent component is rendered as a literal tag (<basecomponent> - no hyphen). I am assuming that because it's translating to <basecomponent> that Vue doesn't know how to render the base component.

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.

Reproduction (repo) here: https://github.com/lukef/vue-component-repro.

vuejs3 vue-component vue.js
1 Answers

It took me some time, but I think I have solved the riddle now. See at the bottom for the tl;dr, here follows the "making of" first.

The first observation was that copying the components in comp unmodified to comp-test resulted in a working page. Then I tried to import them directly from comp using relative paths which resulted in the original failure. This led me to conclude that there must be some difference in the surroundings. After some experiments, I found that the node_modules in comp caused the disruption: after removing these, the inclusion from comp worked as well. Looking into the files in comp-test/node_modules/comp, I found that the original node_modules from comp are copied over as well. Now I had to find a way to add comp to comp-test without copying the node_modules. Even though node_modules are not published, neither .gitignore nor .npmignore had any effect. The solution was to create a tarball using yarn pack and import it from comp-test.

Probably the original problem is some conflict in the two node_modules, but it only occurs when there is a <slot> in BaseComponent - strange...

This results in the following fixes:

in comp/package.json:11

"build": "yarn build:lib && yarn pack",

(instead of just yarn build:lib), and in comp/package.json:15

"comp": "file:../comp/comp-v0.1.0.tgz"

(instead of "comp": "../comp"). In order to refresh comp after some modifications, you have to run the following commands:

in comp:

$ yarn build

then in comp-test:

$ yarn add file:../comp/comp-v0.1.0.tgz
$ yarn serve

Note that the actual result of yarn pack is not quite what you might think reading its description - at least for me "package dependencies" mean ultimately some content of some node_modules directory. Instead it creates a tarball that contains more or less the same files as what is published using yarn publish. After yarn build:lib && yarn pack, the content of the tarball is refreshed, and yarn add file:../comp/comp-v0.1.0.tgz forces a refresh of comp-test/node_modules/comp.

user_36398560
Related