记录一个问题：G6和vite的兼容性问题

weixin_39492106

已于 2022-08-29 18:29:24 修改

阅读量1.8k

点赞数

分类专栏：问题前端文章标签： vue.js javascript typescript 前端

于 2022-03-11 17:08:33 首次发布

本文链接：https://blog.csdn.net/weixin_39492106/article/details/123429145

版权

问题同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

在Vue3+TS+vite环境中，项目build后出现TypeError，与@antv/G6库有关。移除G6相关路由后问题解决，确认为G6和vite的兼容性冲突。尝试按照G6官方文档和gitissues中的解决方案未成功。最终在vite.config.ts中添加G6的别名配置，解决了打包后页面无法访问的问题。

摘要由CSDN通过智能技术生成

1.环境

vue3+ts+vite

2.问题描述

vue-router.1c26fa4f.js:6 TypeError: Cannot read properties of undefined (reading ‘constant’)
本地开发环境正常 build完后页面无法正常打开，控制台报错:

 vue-router.1c26fa4f.js:6 TypeError: Cannot read properties of undefined (reading 'constant')

3.问题原因

经过排查发现项目中使用到@antv/G6，把使用到G6的页面从路由中去掉后，项目可以正常访问。确定G6和 vite有兼容性问题。
使用版本：

 "vite": "^2.7.2",
 "@antv/g6": "^4.5.3",

4.解决方法

根据官网提供的解决方法：https://g6.antv.vision/zh/docs/manual/FAQ/vite-support
并没有什么用，项目仍然无法访问：

在git issues中查找带解决方案：vite.config.ts 中添加代码：

resolve: {
 alias: [
       {
          find: /^@antv\/g6/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@antv/g6/dist/g6.min.js"
          ),
        },
     ],
 },

再次打包，页面可以正常访问。