我最近一直在为Vue 3开发自己的组件库。当我将它导入到我的主项目中使用时,我在浏览器中得到了这个错误。
[Vue warn]: Invalid VNode type: Symbol("Fragment") (symbol) at
我不能确切地说是什么导致了这个错误,但我觉得它与<slot />
有关。我读到它可能是由两个Vue示例引起的,但如果是这样的话,很难删除其中一个。我已经尝试使用不同的“打包器”以防万一(汇总,网络包,包裹),每一个都有不同的设置变化,但什么都没有改变。是不是我遗漏了什么概念?
对于一些上下文,这里是我的库中的组件文件的摘要版本:
<template>
<div class="field">
<label class="label">{{ label }}</label>
<slot />
</div>
</template>
<script>
export default {
name: "b-field",
props: {
label: String
}
};
</script>
它在我的应用程序中是这样使用的,其中<b-input />
是另一个组件。
<b-field>
<b-input />
</b-field>
这真的把我难住了。任何帮助,或者至少是给我指出正确方向的提示,都是受欢迎的。
4条答案
按热度按时间vlju58qv1#
这个错误是因为Vue被加载了两次,一次是从主项目,一次是从通过
npm link
(或本地安装的依赖项)导入的项目。如果你使用了vue-cli,你可以配置父项目的
vue.config.js
文件,通过添加以下内容使其与本地依赖项一起工作:rqcrx0a62#
很棒的回答:https://stackoverflow.com/a/68361722/16453703
我这样修改webpack.common.js设置:
vsnjm48y3#
事实证明,“如何”访问库很重要。对于测试建议,我使用
npm link
作为从我的项目访问包的方法。然而,这导致了某种依赖性故障(IDK)。在库上快速运行npm publish
,在项目上快速运行npm install
之后,一切都运行得很好。doinxwow4#
Vite(
vite.config.js
)的配置提取示例,如果您正在构建一个库,并且不希望在您的dist构建代码中包含外部依赖项: