一、前言

救救孩子，被困扰一周多了。

二、问题概述

2023年发布了antV X6的2.*版本，发现使用过程中会出现很多错误。
首先，个人使用的框架是Vue3，感觉有可能会是兼容性问题，但是有一个同事的电脑上是可以正常运行的。

npm安装X6

npm install @antv/x6 --save

发现安装的默认版本是2.7.5，经历过降低版本，引入1.*等操作，发现仍不能使用，目前的antV版本是2.0.5。
有时登录发现可以正常使用antV X6，但是若进行代码操作，特别是引入新插件（即使是已经下载过的x6插件，重新引入，就会报‘ToolItem’错）

三、目前项目安装的插件如下（安装但不一定引入，引入即报错）：

四、报错

报错一：

报错情况：
安装最新版本的antV/X6，使用graph会报错如下：

//下载
npm install @antv/x6 --save

//版本
"@antv/x6": "^2.9.7",

//引用
import {Graph} from '@antv/x6';

caught (in promise) TypeError: Cannot read properties of undefined (reading ‘ToolItem’)
at button.ts:10:39

当这里的引用改为：

import {Graph} from '@antv/x6/lib';

不报错了，但是引入其他的插件仍会报错，也需要添加“/lib”。
如果给其他的插件都加上‘/lib/',画面会成功显示，但是拖拽功能无法使用，粘贴复制功能也无法使用。

import {Graph, Shape} from '@antv/x6/lib';
import {Snapline} from "@antv/x6-plugin-snapline/lib";
import {Keyboard} from "@antv/x6-plugin-keyboard/lib";
import {Dnd} from "@antv/x6-plugin-dnd/lib";
import {Stencil} from "@antv/x6-plugin-stencil/lib";

报错二：

如想拖拽，
则会报错如下：

报错三：

删除.vite文件夹，引入下载所需插件，添加到vite.config.js，报错。
原因：
graph.use了插件，但是没有引入或者引入了插件，没有进行graph.use使用。

报错四：

引入并使用了Keyboard,并且在vite.config.js中也进行了引入，但是报错。
原因：
Keyboard仅使用，但是没有进行bindKey事件绑定也是不行的。

import {Keyboard} from "@antv/x6-plugin-keyboard";
...
...
...
				graph.use(
					// 	快捷键
					new Keyboard()
				)

五、解决问题

方法一：
删除node_modules中的.vite，在vite.config.js文件中的optimizeDeps下的exclude中，手动添加插件名称即可。

		optimizeDeps: {
			// exclude: []
			exclude: [
				'@antv/x6',
				'@antv/x6-plugin-stencil',
				'@antv/x6-plugin-dnd',
				'@antv/x6-plugin-history',
				'@antv/x6-plugin-keyboard',
				'@antv/x6-plugin-selection',
				'@antv/x6-plugin-snapline',
				'@antv/x6-plugin-clipboard',
				'@antv/x6-plugin-keyboard'
			]
		}

在用到的地方，直接引入插件。

import {Graph, Shape} from '@antv/x6';
//图形变换
// import { Transform } from "@antv/x6-plugin-transform";
//对齐线
import {Snapline} from "@antv/x6-plugin-snapline";
//复制粘贴
// import {Clipboard} from "@antv/x6-plugin-clipboard";
//快捷键
// import {Keyboard} from "@antv/x6-plugin-keyboard";
//撤消重做
// import {History} from "@antv/x6-plugin-history";
// import {Dnd} from "@antv/x6-plugin-dnd";
import {Selection} from "@antv/x6-plugin-selection";
import {Stencil} from "@antv/x6-plugin-stencil";