vite2+vue3项目,antv/g6引入运行报错

[namewhat]

1. g6版本 v4.3.11 vue版本3.0.5 vite版本2.1.0
2. 浏览器chrome最新版
3. 执行动作 安装 npm install --save @antv/g6 随后任意vue文件中引入 import G6 from '@antv/g6'
4. 浏览器控制台报错信息

vue-router.esm-bundler.js:72 [Vue Router warn]: uncaught error during route navigation: warn @ vue-router.esm-bundler.js:72 triggerError @ vue-router.esm-bundler.js:3262 （匿名） @ vue-router.esm-bundler.js:2999 Promise.catch（异步） pushWithRedirect @ vue-router.esm-bundler.js:2996 （匿名） @ vue-router.esm-bundler.js:3016 Promise.then（异步） pushWithRedirect @ vue-router.esm-bundler.js:3000 push @ vue-router.esm-bundler.js:2931 install @ vue-router.esm-bundler.js:3345 use @ runtime-core.esm-bundler.js:3088 （匿名） @ main.js:67 vue-router.esm-bundler.js:3264 TypeError at DecorateConstructor (Reflect.js:544) at Reflect.decorate2 (Reflect.js:130) at __decorate (tslib.es6.js:57) at index.ts:50 triggerError @ vue-router.esm-bundler.js:3264 （匿名） @ vue-router.esm-bundler.js:2999 Promise.catch（异步） pushWithRedirect @ vue-router.esm-bundler.js:2996 （匿名） @ vue-router.esm-bundler.js:3016 Promise.then（异步） pushWithRedirect @ vue-router.esm-bundler.js:3000 push @ vue-router.esm-bundler.js:2931 install @ vue-router.esm-bundler.js:3345 use @ runtime-core.esm-bundler.js:3088 （匿名） @ main.js:67 vue-router.esm-bundler.js:72 [Vue Router warn]: Unexpected error when starting the router: TypeError at DecorateConstructor (Reflect.js:544) at Reflect.decorate2 (Reflect.js:130) at __decorate (tslib.es6.js:57) at index.ts:50 warn @ vue-router.esm-bundler.js:72 （匿名） @ vue-router.esm-bundler.js:3347 Promise.catch（异步） install @ vue-router.esm-bundler.js:3345 use @ runtime-core.esm-bundler.js:3088 （匿名） @ main.js:67

最后, 我尝试用cdn引入,发现g6 v4以上必定报上述的错误, v3可以正常引入, 但v3转npm包引入时又报别的错误了

[namewhat]

npm引入g6 v3.8.3, 运行报错

(this will be run only when your dependencies or config have changed) node_modules/@antv/matrix-util/esm/vec2.js:3:5: error: Cannot assign to import "angle" 3 │ vec2.angle = function (v1, v2) { ╵ ~~~~~

node_modules/@antv/matrix-util/esm/vec2.js:13:5: error: Cannot assign to import "direction" 13 │ vec2.direction = function (v1, v2) { ╵ ~~~~~~~~~

node_modules/@antv/matrix-util/esm/vec2.js:16:5: error: Cannot assign to import "angleTo" 16 │ vec2.angleTo = function (v1, v2, direct) { ╵ ~~~~~~~

node_modules/@antv/matrix-util/esm/mat3.js:2:5: error: Cannot assign to import "translate" 2 │ mat3.translate = function (out, a, v) { ╵ ~~~~~~~~~

node_modules/@antv/matrix-util/esm/mat3.js:7:5: error: Cannot assign to import "rotate" 7 │ mat3.rotate = function (out, a, rad) { ╵ ~~~~~~

node_modules/@antv/matrix-util/esm/mat3.js:12:5: error: Cannot assign to import "scale" 12 │ mat3.scale = function (out, a, v) { ╵ ~~~~~

node_modules/@antv/matrix-util/esm/mat3.js:17:5: error: Cannot assign to import "transform" 17 │ mat3.transform = function (m, actions) { ╵ ~~~~~~~~~

node_modules/@antv/matrix-util/esm/vec2.js:30:5: error: Cannot assign to import "vertical" 30 │ vec2.vertical = function (out, v, flag) { ╵ ~~~~~~~~

error when starting dev server: Error: Build failed with 8 errors: node_modules/@antv/matrix-util/esm/mat3.js:2:5: error: Cannot assign to import "translate" node_modules/@antv/matrix-util/esm/mat3.js:7:5: error: Cannot assign to import "rotate" node_modules/@antv/matrix-util/esm/mat3.js:12:5: error: Cannot assign to import "scale" node_modules/@antv/matrix-util/esm/mat3.js:17:5: error: Cannot assign to import "transform" node_modules/@antv/matrix-util/esm/vec2.js:3:5: error: Cannot assign to import "angle" ... at failureErrorWithLog (D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:1493:15) at D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:1151:28 at runOnEndCallbacks (D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:941:63) at buildResponseToResult (D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:1149:7) at D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:1258:14 at D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:629:9 at handleIncomingPacket (D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:726:9) at Socket.readFromStdout (D:\workspace\zy_admin\zy_admin_ui\node_modules\esbuild\lib\main.js:596:7) at Socket.emit (events.js:375:28) at addChunk (internal/streams/readable.js:290:12) at readableAddChunk (internal/streams/readable.js:265:9) at Socket.Readable.push (internal/streams/readable.js:204:10) at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

[Yanyan-Wang]

对 vue 不是太了解，社区有没有小伙伴了解的可以帮忙看下？

[ws456999]

@Yanyan-Wang

Module namespace exotic objects are not extensible according to the ECMAScript spec. So this is the expected behavior.

import * as vec2 from '@antv/gl-matrix/lib/gl-matrix/vec2';
import { clamp } from '@antv/util';
vec2.angle = function (v1, v2) {} // 这样的语法esmodule会报错

参考 https://github.com/vitejs/vite/issues/4433

[ws456999]

@namewhat 不知道我们的情况是否一样

我现在的方案是先临时删掉@antv/matrix-utils/package.json的module字段，让vite解析commonjs的版本，但这种方案并不可持续

[lwh2015]

@namewhat 不知道我们的情况是否一样

我现在的方案是先临时删掉@antv/matrix-utils/package.json的module字段，让vite解析commonjs的版本，但这种方案并不可持续

现在这个在g6 4.1.12版本可以正常使用，但是对于3.8.3版本有可持续的解决方案吗？

[scomparsa]

同样遇到问题... 求解决方案额...

[namewhat]

应该是不支持vue3的

---原始邮件--- 发件人: @.> 发送时间: 2022年5月31日(周二) 下午5:15 收件人: @.>; 抄送: @.@.>; 主题: Re: [antvis/G6] vite2+vue3项目,antv/g6引入运行报错 (#3240)

同样遇到问题... 求解决方案额...

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[huangyiman]

我也是遇到这个问题报错，你咋解决的我的是g6 3版本

[namewhat]

没解决，直接弃坑

---原始邮件--- 发件人: @.> 发送时间: 2022年7月12日(周二) 下午5:53 收件人: @.>; 抄送: @.@.>; 主题: Re: [antvis/G6] vite2+vue3项目,antv/g6引入运行报错 (#3240)

我也是遇到这个问题报错，你咋解决的我的是g6 3版本

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[zhangzhusheng]

同样的问题，有解决方案吗，高版本可用吗

[namewhat]

没有解决，直接弃坑

---原始邮件--- 发件人: @.> 发送时间: 2022年7月29日(周五) 上午10:57 收件人: @.>; 抄送: @.@.>; 主题: Re: [antvis/G6] vite2+vue3项目,antv/g6引入运行报错 (#3240)

同样的问题，有解决方案吗，高版本可用吗

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[ywager]

+1

[Yanyan-Wang]

升级 G6 到最新版本，可参考解决方案： https://github.com/antvis/G6/issues/3284 https://github.com/antvis/G6/issues/2961

[ChobitsSP]

写一个命令将 vec2.js 和 mat3.js 2个文件替换就可以了 将import的修改变量名克隆一份即可 例如

import * as old_mat3 from '@antv/gl-matrix/lib/gl-matrix/mat3';

const mat3 = {
  ...old_mat3,
};

可以写一个js文件执行替换:

import fs from 'fs';

// 定义源文件和目标文件
const sourceFile1 = './docs/antv_g6/vec2.js';
const targetFile1 = './node_modules/@antv/matrix-util/esm/vec2.js';

const sourceFile2 = './docs/antv_g6/mat3.js';
const targetFile2 = './node_modules/@antv/matrix-util/esm/mat3.js';

// 替换文件函数
function replaceFile(source, target) {
  fs.copyFileSync(source, target, fs.constants.COPYFILE_FICLONE);
  console.log(`File ${source} was copied to ${target}`);
}

// 执行替换操作
replaceFile(sourceFile1, targetFile1);
replaceFile(sourceFile2, targetFile2);

[SharkBaby]

@namewhat 不知道我们的情况是否一样

我现在的方案是先临时删掉@antv/matrix-utils/package.json的module字段，让vite解析commonjs的版本，但这种方案并不可持续

我这边提了在 matrix-uti包下面提了一个issue， 看哈后续是否会被修复 https://github.com/antvis/util/issues/109

[raotaohub]

` Compiled with problems: × WARNING in ./node_modules/@antv/matrix-util/esm/mat3.js 17:0-14 export 'transform' (imported as 'mat3') was not found in '@antv/gl-matrix/lib/gl-matrix/mat3' (possible exports: __esModule, add, adjoint, clone, copy, create, determinant, equals, exactEquals, frob, fromMat2d, fromMat4, fromQuat, fromRotation, fromScaling, fromTranslation, fromValues, identity, invert, mul, multiply, multiplyScalar, multiplyScalarAndAdd, normalFromMat4, projection, rotate, scale, set, str, sub, subtract, translate, transpose) WARNING in ./node_modules/@antv/matrix-util/esm/vec2.js 13:0-14

export 'direction' (imported as 'vec2') was not found in '@antv/gl-matrix/lib/gl-matrix/vec2' (possible exports: __esModule, add, angle, ceil, clone, copy, create, cross, dist, distance, div, divide, dot, equals, exactEquals, floor, forEach, fromValues, inverse, len, length, lerp, max, min, mul, multiply, negate, normalize, random, rotate, round, scale, scaleAndAdd, set, sqrDist, sqrLen, squaredDistance, squaredLength, str, sub, subtract, transformMat2, transformMat2d, transformMat3, transformMat4)

WARNING in ./node_modules/@antv/matrix-util/esm/vec2.js 16:0-12 export 'angleTo' (imported as 'vec2') was not found in '@antv/gl-matrix/lib/gl-matrix/vec2' (possible exports: __esModule, add, angle, ceil, clone, copy, create, cross, dist, distance, div, divide, dot, equals, exactEquals, floor, forEach, fromValues, inverse, len, length, lerp, max, min, mul, multiply, negate, normalize, random, rotate, round, scale, scaleAndAdd, set, sqrDist, sqrLen, squaredDistance, squaredLength, str, sub, subtract, transformMat2, transformMat2d, transformMat3, transformMat4)

WARNING in ./node_modules/@antv/matrix-util/esm/vec2.js 18:27-41 export 'direction' (imported as 'vec2') was not found in '@antv/gl-matrix/lib/gl-matrix/vec2' (possible exports: __esModule, add, angle, ceil, clone, copy, create, cross, dist, distance, div, divide, dot, equals, exactEquals, floor, forEach, fromValues, inverse, len, length, lerp, max, min, mul, multiply, negate, normalize, random, rotate, round, scale, scaleAndAdd, set, sqrDist, sqrLen, squaredDistance, squaredLength, str, sub, subtract, transformMat2, transformMat2d, transformMat3, transformMat4)

WARNING in ./node_modules/@antv/matrix-util/esm/vec2.js 30:0-13 export 'vertical' (imported as 'vec2') was not found in '@antv/gl-matrix/lib/gl-matrix/vec2' (possible exports: __esModule, add, angle, ceil, clone, copy, create, cross, dist, distance, div, divide, dot, equals, exactEquals, floor, forEach, fromValues, inverse, len, length, lerp, max, min, mul, multiply, negate, normalize, random, rotate, round, scale, scaleAndAdd, set, sqrDist, sqrLen, squaredDistance, squaredLength, str, sub, subtract, transformMat2, transformMat2d, transformMat3, transformMat4) `

    "@antv/dom-util": "^2.0.2",
    "@antv/g-canvas": "^0.4.12",
    "@antv/g6": "3.5.2",
    "@antv/g6-react-node": "^1.4.4",
    "@antv/matrix-util": "^2.0.7",
    "@antv/util": "~2.0.9",
    "@antv/x6": "^1.1.0",
    "@antv/x6-react-components": "^1.1.7",
    "@antv/x6-react-shape": "^1.4.1",

我在 "webpack": "^5.87.0" 启动提示如上 。 vite 4.x 启动，报错如楼主一样。

[github-actions[bot]]

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help. 这个 issue 已经被关闭，因为 它已经过期很久了。 如果你仍然需要帮助，请创建一个新的 issue。