Vue3从外部dist JS注入组件遇Invalid VNode type错误的解决方法

我有一个非常简单的Vue3应用：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

let currentApp = createApp(App);
(window as any).load(currentApp);
currentApp.mount('#app');

在index.html文件中引入了一个dist库：

<script src="http://localhost:5173/dist/assets/index.59eda240.js"></script>

该dist JS的内容为：

import HelloWorld from './components/HelloWorld.vue'

(window as any).load = (app: any) => {
    app.component('hello-world', HelloWorld);
}

当使用仅含一行文本“Hello”的简单HelloWorld.vue时一切正常，但添加CSS类或复杂组件后，会出现：

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

我该如何解决此问题？或有没有其他运行时加载组件的方式？

附：Vue2中做相同操作无问题

更新补充信息 #

• Vue版本：3.2.38
• 核心逻辑：主应用创建Vue实例，外部库在运行时加载组件
• 实际现象：组件UI不显示，但逻辑代码正常运行，仅出现上述警告；该警告仅在复杂组件中出现，简单组件可正常渲染

这个问题的核心原因是Vue模块重复加载：主应用和外部dist库各自打包/加载了一份Vue实例，导致组件编译时依赖的内部Symbol（比如Vue的VNode类型标识）不匹配，从而抛出无效VNode类型的警告。

方法1：将外部库配置为复用主应用的Vue #

以Vite构建外部库为例，修改vite.config.js将Vue标记为外部依赖，不打包进dist文件：

export default {
  build: {
    rollupOptions: {
      external: ['vue'], // 标记Vue为外部依赖
      output: {
        globals: {
          vue: 'Vue' // 对应主应用暴露的全局Vue变量
        }
      }
    }
  }
}

外部库代码保持正常导入Vue即可，构建后会直接使用主应用提供的Vue实例，避免上下文不匹配。

方法2：改用异步组件动态加载 #

放弃全局load函数注册的方式，直接在主应用中使用Vue的异步组件特性加载外部组件：

// main.js
import { createApp, defineAsyncComponent } from 'vue'
import './style.css'
import App from './App.vue'

const app = createApp(App);
// 动态导入外部组件
const HelloWorld = defineAsyncComponent(() => import('http://localhost:5173/dist/components/HelloWorld.vue'));
app.component('hello-world', HelloWorld);
app.mount('#app');

注意：需确保外部资源支持跨域访问，或配置对应CORS规则。

方法3：使用统一的Vue上下文加载远程组件 #

如果需要更灵活的远程组件管理，可以基于@vue/runtime-core的createVNode结合动态导入实现，或者使用社区成熟的远程组件工具，核心都是确保组件始终使用主应用的Vue上下文，避免多实例冲突。

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