旧项目中编译报错Unexpected character '#'

[hlysf]

问题描述

环境：
angular9、"@antv/g6": "4.5.0"

ml-matrix包更新到6.11.0后，编译失败
报错：
/node_modules/@antv/layout/node_modules/ml-matrix/src/symmetricMatrix.js 8:2
Module parse failed: Unexpected character '#' (8:2)

重现链接

xxx

重现步骤

编译项目

预期行为

编译成功

平台

• 操作系统: [ Linux.]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.5.0 ]

屏幕截图或视频（可选）

补充说明（可选）

No response

[github-actions]

hi @hlysf, welcome!

[github-actions]

Hi @hlysf, Please star this repo if you find it useful! Thanks ⭐!
你好 @hlysf。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[Yiliayouyou]

遇到相同的问题，求解。去看了一下表层，应该是ml-matrix包升级后，@antv/layout依赖自动把ml-matrix升级到最新版本了，但是不知道要怎么打包才能识别这个包里的语法。

[hlysf]

遇到相同的问题，求解。去看了一下表层，应该是ml-matrix包升级后，@antv/layout依赖自动把ml-matrix升级到最新版本了，但是不知道要怎么打包才能识别这个包里的语法。

我在package.json中固定ml-matrix的版本了，你也可以试试
"resolutions": {
"ml-matrix": "6.10.8"
}

[Aarebecca]

遇到相同的问题，求解。去看了一下表层，应该是ml-matrix包升级后，@antv/layout依赖自动把ml-matrix升级到最新版本了，但是不知道要怎么打包才能识别这个包里的语法。

可以尝试使用 @babel/plugin-transform-private-methods 来转译该语法

[Yiliayouyou]

遇到相同的问题，求解。去看了一下表层，应该是ml-matrix包升级后，@antv/layout依赖自动把ml-matrix升级到最新版本了，但是不知道要怎么打包才能识别这个包里的语法。

可以尝试使用 @babel/plugin-transform-private-methods 来转译该语法

已解决，感谢

[Burn0317]

遇到相同的问题，求解。去看了一下表层，应该是ml-matrix包升级后，@antv/layout依赖自动把ml-matrix升级到最新版本了，但是不知道要怎么打包才能识别这个包里的语法。

可以尝试使用 @babel/plugin-transform-private-methods 来转译该语法

已解决，感谢
怎么解决的啊

[Yiliayouyou]

遇到相同的问题，求解。去看了一下表层，应该是ml-matrix包升级后，@antv/layout依赖自动把ml-matrix升级到最新版本了，但是不知道要怎么打包才能识别这个包里的语法。

可以尝试使用 @babel/plugin-transform-private-methods 来转译该语法

已解决，感谢
怎么解决的啊

1. npm install @babel/plugin-transform-private-methods --save-dev
2. babel.config.js配置添加
   { "plugins": ["@babel/plugin-transform-private-methods"] }
3. 我的是vue项目，vue.config.js中还添加了 transpileDependencies: ['ml-matrix']

[zhangkaidi]

1.如果@antv/g6版本package.json中为固定版本，也可以将ml-matrix版本设置为固定版本
建议使用ml-matrix（6.11.0）以下的版本
原因：
1）@antv/g6依赖的ml-matrix使用了^6.5.0，当项目重新install后，会更新到ml-matrix(6.11.0)版本
2）ml-matrix(6.11.0)版本使用了[ES2022]的私有方法，在node_modules中该语法不能被解析从而导致报错
劣势：
版本锁定后续不好维护，临时方案；

2.vue工程建议使用transpileDependencies: ['ml-matrix']
原因：在使用现代 JavaScript 开发时，通常会使用 ES6+ 的新特性来编写代码。然而，一些旧的浏览器或环境可能不支持这些新特性。通常，项目中自己的源代码会通过 Babel 进行转译以兼容旧环境，但是 node_modules 中的依赖默认不会被转译。如果这些依赖包含现代 JavaScript 语法，它们可能在旧浏览器中无法正常运行。通过在构建配置中指定 transpileDependencies:['ml-matrix']，你告诉构建系统也需要将 ml-matrix 这个依赖包通过 Babel 转译，以确保它在所有目标环境中都能正常工作
劣势：
@antv/g6依赖的第三方库， 正常情况下node_modules的依赖，研发不需要自行处理，应该是依赖库自行解决。不然这种未知版本改变，可能会对我们开发产生影响，有很多不确定性。

3.其他方案@babel/plugin-transform-private-methods来处理
原因：这个插件允许开发者在 JavaScript 类中使用私有方法（使用 # 前缀定义的方法），这是 ES2022 引入的一个新特性。私有方法只能在类的内部被访问，这有助于封装和隐藏类的内部实现细节。然而，并不是所有的 JavaScript 运行环境都支持私有方法。@babel/plugin-transform-private-methods 插件能够将使用私有方法的代码转换成老版本的 JavaScript，确保代码能在不支持私有方法的环境中运行。

[wenmin92]

@zhangkaidi 在其他地方看到的你说的第二个方案，我试了并不行，仍然报错，提示如下：

Module build failed: Error: E:\Web\qoe_web\src\index.js: 'loose' mode configuration must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled).

在自己的项目中固定 ml-matrix 也不行，因为 layout 使用了子依赖，结果仍然报错。

补充：通过 overrides/resolutions 强制依赖的版本号即可解决