antvis / antvis/G2Plot

🤔 [QUESTION] vitest run unit test throw error require() of ES Module

Open
#3,611 1 comment 1 reaction 0 assignees View on GitHub
Question
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Question description [Please make everyone to understand it]
在 vue3 使用 g2plot 开发运行打包发版一切正常,最近在补充单元测试,发现 vitest 跑含图表绘制页面组件的时候一直会因为引入 g2plot 而报错,报错的是 require() of ES Module 去掉图表的引入和绘制单测则正常运行

Error: require() of ES Module D:\projects\node_modules\d3-interpolate\src\index.js from D:\projects\node_modules\@antv\g-base\lib\animate\timeline.js not supported.
Instead change the require of index.js in D:\projects\node_modules\@antv\g-base\lib\animate\timeline.js to a dynamic import() which is available in all CommonJS modules.
❯ Object. node_modules/@antv/g-base/lib/animate/timeline.js:5:24
❯ Object. node_modules/@antv/g-base/lib/abstract/canvas.js:7:18
❯ Object. node_modules/@antv/g-base/lib/index.js:17:16
❯ Object. node_modules/@antv/g2/lib/dependents.js:6:16
❯ Object. node_modules/@antv/g2/lib/util/scale.js:7:20
❯ Object. node_modules/@antv/g2/lib/util/axis.js:6:15
❯ Object. node_modules/@antv/g2/lib/facet/facet.js:7:14
❯ Object. node_modules/@antv/g2/lib/facet/index.js:5:15
❯ Object. node_modules/@antv/g2/lib/chart/view.js:8:15
❯ Object. node_modules/@antv/g2/lib/chart/chart.js:8:38
❯ Object. node_modules/@antv/g2/lib/chart/index.js:7:15
❯ Object. node_modules/@antv/g2/lib/core.js:8:15
❯ Object. node_modules/@antv/g2/lib/index.js:6:14
❯ async D:/projects/dbadvisor-web/node_modules/@antv/g2plot/esm/index.js:1:31

这边也试着引用了 @antv/g2plot/esm 也无济于事
查阅资料跟着配置
test: {
alias: [{ find: /^@antv\/g2plot$/, replacement: '@antv/g2plot/esm/index.js' }],
}
也无济于事

### 🏞 Expected result
希望可以知道怎么配置可以让测试用例跑起来

### 🚑 Any additional [like screenshots]

* **G2Plot Version**: ^2.4.23
* **Platform**: vue3

Contributor guide

Open the contributing guide

Research direction

Start with the Vitest test configuration and the reported import chain through node_modules/@antv/g2plot/esm/index.js, @antv/g2/lib, @antv/g-base/lib/animate/timeline.js, and d3-interpolate/src/index.js. Reproduce the Vue 3 chart-component test failure and determine a configuration or dependency-resolution change that lets the unit tests complete successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.