Vue.js/Vite组件库跨项目引用报无效VNode类型错误求助

问题概述 #

构建可多项目复用的UI组件库时，部分组件正常渲染，部分组件抛出两类错误：

1. [Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol)
2. [Vue warn]: Invalid VNode type: Symbol(Comment) (symbol)

经初步排查，问题疑似源于多Vue实例冲突，但现有方案均无法解决。补充细节：

• 组件模板含v-if时，抛出Comment类型错误
• 移除v-if后，错误变为Fragment类型

组件库构建与导出流程 #

核心导出文件 #

export.js

import Paragraph from "./stories/Paragraph/Paragraph.vue";
import Title from "./stories/Title/Title.vue";

export { 
  Paragraph, 
  Title, 
};

Vite配置文件 #

vite.config.js

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

export default (args) => {
  const isProduction = args.mode === "production";
  return defineConfig({
    root: "src",
    server: {
      port: 3000,
    },
    build: {
      sourcemap: true,
      outDir: "../dist",
      lib: {
        entry: path.resolve(__dirname, "/export.js"),
        name: "[PACKAGE_NAME]",
      },
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
    css: {
      modules: {
        localsConvention: "camelCase",
        generateScopedName: isProduction ? "[hash:base64:6]" : "[local]_[hash:base64:2]",
      },
    },
    plugins: [vue()],
  });
};

Package配置 #

package.json

"type": "module",
  "main": "./dist/[PACKAGE_NAME].js",
  "module": "./dist/[PACKAGE_NAME].umd.cjs",
  "style": "./dist/style.css",
  "exports": {
    ".": {
      "import": "./dist/[PACKAGE_NAME].js",
      "require": "./dist/[PACKAGE_NAME].umd.cjs"
    }
  },
  "files": [
    "dist/*",
    "src/*"
  ],
  "scripts": {
    "build": "vite build",
  },
  "peerDependencies": {
    "vue": "^3.2.45"
  },

构建与发布命令 #

pnpm run build
npm publish

组件代码示例 #

正常渲染组件：Title.vue #

<script setup>
import titleCss from "./title.module.css";
import { requiredString } from "../../utils/propConstants";

const props = defineProps({
  text: requiredString,
});
</script>

<template>
  <h3 :class="titleCss.pageTitle">{{ props.text }}</h3>
</template>

渲染报错组件：Paragraph.vue #

<script setup>
import paragraphCss from "./paragraph.module.css";
import { optionalString, requiredArray } from "../../utils/propConstants";

const props = defineProps({
  paragraphs: requiredArray,
  smallPrint: optionalString,
});
</script>

<template>
  <div :class="paragraphCss.pageParagraph">
    <p v-for="(paragraph, i) in props.paragraphs" :key="i">
      {{ paragraph }}
    </p>
    <p v-if="props.smallPrint" :class="paragraphCss.smallPrint">
      {{ props.smallPrint }}
    </p>
  </div>
</template>

组件导入与使用 #

import { Video, Title, Paragraph } from "[PACKAGE_NAME]";
...
<Title :text="'Test Title'" /> <!-- 正常渲染 -->
<Paragraph :paragraphs="paragraphs" :smallPrint="smallPrint" /> <!-- 报错 -->

参考资料 #

• 已有同类问题记录，但现有解决方案无效：Vue 3 Invalid VNode type
• Vite官方库模式文档

内容的提问来源于stack exchange，提问作者Tom