Vue 3 无效的 VNode 类型答案

【问题标题】：Vue 3 Invalid VNode typeVue 3 无效的 VNode 类型
【发布时间】：2021-07-15 22:36:12
【问题描述】：

我最近一直在为 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 /> 是另一个组件。

<b-field>
   <b-input />
</b-field>

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

【问题讨论】：

标签： javascript vue.js

【解决方案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`)
            }
        }
    }
};

【讨论】：

【解决方案2】：

真棒答案：https://stackoverflow.com/a/68361722/16453703

我像这样更改我的 webpack.common.js 设置：

  resolve: {
    extensions: ['\*', '.js', '.jsx', '.vue'], 
    symlinks: false,
    alias: {
        "@": path.resolve(__dirname, '../src'),
        'vue$': 'vue/dist/vue.esm-bundler.js',
        vue: path.resolve(__dirname, `../node_modules/vue`)
    },
},

【讨论】：

【解决方案3】：

事实证明，如何访问图书馆很重要。对于测试建议，我使用npm link 作为从我的项目访问包的方法。然而，这导致了某种依赖故障（IDK）。在库上快速npm publish 和项目上npm install 之后，一切都很好。

【讨论】：