最近在开发中遇到一个问题，在这个问题上又衍生出了其他问题，下面我简要谈谈
在数据可视化开发中，不可避免要用到各种各样的可视化组件、插件之类的东西，近几年蚂蚁的antv使用的人数也在不停的增加，然而在本次开发中，遇到了一个很让人无奈的问题
1、错误场景
在开发环境，一点问题都没有，完全正常运行，功能完成后，信心满满的上传代码准备上线（由于是自动化上线打包，开始并不知道打包报错）。
然而，上线之后却发现有一个页面打不开，并且控制台报错
vue-router.1c26fa4f.js:6 TypeError: Cannot read properties of undefined (reading 'constant')
at @dagrejs.15a474a2.js:1:9782
2、错误解读
1、第一眼望过去，好嘛vue-router,以为是vue-router的错误，然后去排查传参及过滤，然后发现没有问题，而且出错的话不可能只出这一个错误。
2、那么，继续看看报错Cannot read properties of undefined (reading ‘constant’)，这一句说实话，没有太大作用，造成这个的可能性太多。
3、那么就是下面@dagrejs，查询得之，这是用来绘制流程图的，而且那个页面里面刚好用到了流程图。所以定位问题，与流程图有关。
3、错误处理
知道是流程图错误之后进行验证
1、注释流程图部分，看打包后是否成功跳转（成功），那么就确定问题了，antv G6的问题。
2、然后想到只是打包后出问题，然后考虑到是不是使用的打包插件vite和G6有啥冲突。
3、尝试本地打包，查看是否有错误
结果：
结果很明显，确实是G6出了问题，那么先去G6官网看一下是否有相应的错误集，vite+G6这种组合肯定有不少人用
4、最终解决
1、查询官网错误示例，果然找到了vite+G6报错的相关信息。
需要插件 rollup-plugin-node-rosolve 和 rollup-plugin-commonjs。虽然不能消除提示，但可以使用。 在 vite.config.js 中如下配置
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
// ...
export default defineConfig({
plugin: [
...,
resolve(),
commonjs(),
...
]
})
2、按照官网配置完成后打包后又报错了，此次报错为引入的包找不到文件，猜测是rollup-plugin-commonjs与包冲突，因为rollup-plugin-commonjs作用是将 CommonJS 模块转换为 ES6，以便它们可以包含在 Rollup 包中。
3、找到错误的包文件，找到相同的替换包或者自己实现相关作用的代码
4、再次打包顺利完成
在这一次的使用中告诉我们，在使用插件的时候，先大略看一下文档中的错误信息合集以及冲突注意能让我们走很多的弯路
