G6: Dependency @antv/g6 is attempting to import Node built-in module util.

[hyrious]

https://github.com/antvis/G6/blob/06da73019d1a6ca8e7481b4229cb85980d966557/src/plugins/timeBar/path.ts#L4

Consider import from @antv/util instead. As a front-end library there shouldn't be any dependencies from nodejs.

---

BTW, vite's rollup will show error:

Illegal reassignment to import 'mat3'
Illegal reassignment to import 'vec2'

But I haven't find out which file causes this issue. Maybe related #2254.

[Yanyan-Wang]

Consider import from @antv/util instead. As a front-end library there shouldn't be any dependencies from nodejs.

Thanks, it will be fixed in next small version

BTW, vite's rollup will show error:

I did not find the file too, even in matrix-util https://github.com/antvis/util/tree/master/packages/matrix-util

[Yanyan-Wang]

Probably related to the @antv/xxx/lib in G6 which is commonjs module. I'm not so familiar with Vue, do you know is there any way to configure the vite project that make it use @antv/g6/lib instead of @antv/g6/esm ?

[IMLaoJI]

我也是vite集成g6出现了问题 现在启动不了 比较急 有解决方案吗

[Yanyan-Wang]

我也是vite集成g6出现了问题 现在启动不了 比较急 有解决方案吗

我看 vite 默认是引用项目的 esm，可以配置成引用 lib 吗

[IMLaoJI]

我也是vite集成g6出现了问题 现在启动不了 比较急 有解决方案吗

我看 vite 默认是引用项目的 esm，可以配置成引用 lib 吗

配置我暂时没找到，我可以先删除es文件夹 让其只能引入lib吗

[Yanyan-Wang]

不了解 vue，不确定这样 vite 会不会报错，你试试看？

[IMLaoJI]

还有这个错 应该是用cls的模块

[IMLaoJI]

有临时解决方案吗 我加入不了G2的钉钉交流群 都满了

[Yanyan-Wang]

就算 AntV 的引用方式全部改成不用引用 lib 的形式，也不能保证我们依赖的其他第三方库、你的项目里依赖的其他库有引入 lib。这个应该是 vite 的一个问题

[hyrious]

Ok, I found a way to get a more detailed error log by using rollup, steps:

echo '{"private":true}' > package.json
npm install -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve
npm install @antv/g6

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'a.js',
  output: { format: 'es' },
  plugins: [resolve(), commonjs()]
};

a.js

export * as G6 from "@antv/g6"

rollup!

npx rollup -c rollup.config.js

outputs

(!) Illegal reassignment to import 'mat3'
node_modules\@antv\matrix-util\esm\mat3.js: (2:0)
1: import * as mat3 from '@antv/gl-matrix/lib/gl-matrix/mat3';
2: mat3.translate = function (out, a, v) {
   ^
3:     var transMat = new Array(9);
...

It looks like your esm bundle result is not sound to rollup. Also,

Error: 'ISystem' is not exported by node_modules\@antv\g-webgpu-core\es\ISystem.js, imported by node_modules\@antv\g-webgpu-core\es\index.js

(I guess should we edit the issue title to 'can not use rollup to bundle this module' or raise a new issue?)

[hyrious]

I think at least vite players could use the old way:

<script src="https://cdn.jsdelivr.net/npm/@antv/[email protected]/dist/g6.min.js"></script>

(put it in your index.html), and you don't have to install this module locally.

For typescript users, you may still have to install it locally for its types. All you have to do is tell vite "don't optimize this module" if you installed it to "dependencies":

vite.config.ts

import type { UserConfig } from "vite"
const config: UserConfig = {
    optimizeDeps: {
        exclude: ['@antv/g6']
    }
}
export default config

Then add types to your d.ts file.
Or you can add it to "devDependencies" and vite won't touch it.

[hyrious]

Probably related to the @antv/xxx/lib in G6 which is commonjs module. I'm not so familiar with Vue, do you know is there any way to configure the vite project that make it use @antv/g6/lib instead of @antv/g6/esm ?

vite depends on rollup to bundle modules. rollup depends on correctly used esm syntax to analyse codes. rollup (and webpack) will look at package.json/module to know if a package provides esm bundle. I didn't find any way to tell rollup don't look at it...

So the best way is writing (bundling) correct code. -- Otherwise just removing "module" from package.json (also dependencies) to let commonjs-plugin wrap your lib code would work.

(I personally suggest to try switching your bundler to rollup, which provides smaller and correct esm bundle than tsc or webpack.)

[Yanyan-Wang]

Related to https://github.com/antvis/G6/pull/2357

[mao0613]

Ok, I found a way to get a more detailed error log by using rollup, steps:

echo '{"private":true}' > package.json
npm install -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve
npm install @antv/g6

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'a.js',
  output: { format: 'es' },
  plugins: [resolve(), commonjs()]
};

a.js

export * as G6 from "@antv/g6"

rollup!

npx rollup -c rollup.config.js

outputs

(!) Illegal reassignment to import 'mat3'
node_modules\@antv\matrix-util\esm\mat3.js: (2:0)
1: import * as mat3 from '@antv/gl-matrix/lib/gl-matrix/mat3';
2: mat3.translate = function (out, a, v) {
   ^
3:     var transMat = new Array(9);
...

It looks like your esm bundle result is not sound to rollup. Also,

Error: 'ISystem' is not exported by node_modules\@antv\g-webgpu-core\es\ISystem.js, imported by node_modules\@antv\g-webgpu-core\es\index.js

(I guess should we edit the issue title to 'can not use rollup to bundle this module' or raise a new issue?)

i get this problem too.is there solution?

[csouchet]

I also have this error when I configure Rollup to use only the ES6 module of G6 (Version 4.1.4).

The file node_modules/@antv/g-webgpu-core/es/ISystem.js is empty, but the file node_modules/@antv/g-webgpu-core/es/ISystem.d.ts export the interface ISystem.

[openscript]

I've the same issue with snowpack as it uses ES6 modules.