Vue 3 无效的 VNode 类型

Question

我最近一直在为 Vue 3 开发自己的组件库。当我将其导入到我的主项目中使用时，我在浏览器中收到此错误。

[Vue warn]: Invalid VNode type: Symbol("Fragment") (symbol) at

我无法准确说出导致错误的原因，但我觉得它与<slot />. 我读到这可能是由于有两个 Vue 实例引起的，但如果是这种情况，则很难删除其中一个。我尝试过使用不同的“打包器”以防万一（Rollup、Webpack、Parcel），每个打包器都有不同的设置变化，但没有任何变化。我缺少一些概念吗？

对于某些上下文，这里是我的库中组件文件的摘要版本：

<template>
    <div class="field">
        <label class="label">{{ label }}</label>
        <slot />
    </div>
</template>

<script>
export default {
    name: "b-field",
    props: {
        label: String
    }
};
</script>

它在我的应用程序中像这样使用，其中<b-input />是另一个组件。

[Vue warn]: Invalid VNode type: Symbol("Fragment") (symbol) at

这实在难倒了我。欢迎任何帮助，或者至少为我指明正确方向的提示。

Answer 1

原来这个错误是因为 Vue 被加载了两次而引起的。npm link一次来自主项目，一次来自通过（或本地安装的依赖项）导入的项目。

如果您使用了 vue-cli，您可以vue.config.js通过添加以下内容来配置父项目的文件，使其与本地依赖项一起使用：

const path = require(`path`);

module.exports = {
    configureWebpack: {
        resolve: {
            symlinks: false,
            alias: {
                vue: path.resolve(`./node_modules/vue`)
            }
        }
    }
};