同一个项目多个vue3.x版本共存时，是否会出现问题？

[ddmy]

我自己写的vue3-gantt 组件.

vue3-gannt package.json:

  "dependencies": {
    "vue": "^3.2.45"
  }

我工作中的项目 package.json

  "dependencies": {
    "vue": "3.2.30"
  }

在我工作中项目, 引入 vue3-gantt时，会产生报错：

script:

<script setup>
import Gantt from 'vue3-gantt'
import 'vue3-gantt/dist/style.css'
const dateRangeList = ref(['2022-01-01', '2022-03-05'])
const data = ref([
  {
    type: "normal",
    color: "",
    name: "流星蝴蝶剑",
    schedule: [
      {
        id: 222221,
        name: "小年活动",
        desc:
            "这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!",
        backgroundColor: "#482",
        textColor: "#fff",
        days: ["2022-04-04", "2022-04-04"],
      },
    ],
  },
]);
</script>

template:

<template>
<Gantt
        :data="data"
        :dateRangeList="dateRangeList"
        itemText="游戏/项目"
        dateText="日期"
 />
</template>

报错：

[Vue warn]: useCssVars is called without current active component instance.
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) 
  at <Gantt data= [{…}] dateRangeList= (2) ['2022-01-01', '2022-03-05'] itemText="游戏/项目"  ... > 
  at <Space vertical="" > 
  at <OverviewView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <LayoutContent style= {padding: '8px'} > 
  at <Layout has-sider="" position="absolute" style= {top: '64px'} > 
  at <Layout position="absolute" > 
  at <DashboardView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <RootNavView> 
  at <LoadingBarProvider> 
  at <NotificationProvider> 
  at <MessageProvider> 
  at <DialogProvider> 
  at <ConfigProvider theme= {name: 'light', common: {…}, Alert: {…}, Anchor: {…}, AutoComplete: {…}, …} locale= {name: 'zh-CN', global: {…}, Popconfirm: {…}, Cascader: {…}, Time: {…}, …} > 
  at <App>

经排查，我发现是vue3-gantt 打包后的js中的 onMounted方法未执行。

目前的解决办法有两个：

1. 手动删除node_modules/vue3-gantt/node_modules 目录
2. 项目使用vue版本与vue3-gantt一致

所以我的问题是，我不太清楚这个问题是属于我组件库代码编写的问题，还是vue3的问题？如果是我代码编写的问题，辛苦各位朋友关于这个问题给予一些指导，非常感谢！

[BryceXu94]

组件库的vue依赖应该放在peerDependencies

[ddmy]

感谢，放到peerDependencies 下，vue项目中， 用户在下载依赖时，就不会单独下载vue了

[edison1105]

多个版本会有问题。你应该改组件库打包配置，把 vue 配置到 external 里