Vue 3无效的VNode类型

xv8emn3q  于 2023-03-24  发布在  Vue.js
关注(0)|答案(4)|浏览(588)

我最近一直在为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>

这真的把我难住了。任何帮助,或者至少是给我指出正确方向的提示,都是受欢迎的。

vlju58qv

vlju58qv1#

这个错误是因为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`)
            }
        }
    }
};
rqcrx0a6

rqcrx0a62#

很棒的回答: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`)
    },
},
vsnjm48y

vsnjm48y3#

事实证明,“如何”访问库很重要。对于测试建议,我使用npm link作为从我的项目访问包的方法。然而,这导致了某种依赖性故障(IDK)。在库上快速运行npm publish,在项目上快速运行npm install之后,一切都运行得很好。

doinxwow

doinxwow4#

Vite(vite.config.js)的配置提取示例,如果您正在构建一个库,并且不希望在您的dist构建代码中包含外部依赖项:

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "package-name",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: { vue: "Vue"}
      }
    }
  },
  plugins: [vue()],
  ...
});

相关问题