Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🤔 [QUESTION] 在 NuxtJS 中使用,CJS 语法的不兼容问题 #3780

Open
AnzhiZhang opened this issue May 22, 2024 · 1 comment
Open
Labels
Question Further information is requested

Comments

@AnzhiZhang
Copy link

AnzhiZhang commented May 22, 2024

🐛 Question description [Please make everyone to understand it]

Nuxt 是一个 Vue SSR 框架,我在使用 G2Plot 时,遇到了以下错误:

require() of ES Module /home/projects/paripjqkq.github/node_modules/d3-interpolate/src/index.js from /home/projects/paripjqkq.github/node_modules/@antv/g-base/lib/animate/timeline.js not supported. Instead change the require of index.js in /home/projects/paripjqkq.github/node_modules/@antv/g-base/lib/animate/timeline.js to a dynamic import() which is available in all CommonJS modules.

timeline.js 的相关代码:

var util_1 = require("@antv/util");
var d3Timer = require("d3-timer");
var d3_interpolate_1 = require("d3-interpolate"); // 目前整体动画只需要数值和数组的差值计算
var register_1 = require("./register");
var PathUtil = require("../util/path");
var color_1 = require("../util/color");

根据 Nuxt 的说明(https://nuxt.com/docs/guide/concepts/esm),这种情况可能是由于在 ESM 模块中使用了 CJS 语法。


我查到了相关的几个 issue:#1894, antvis/G6#4646

antvis/G6#4646 (comment) 这个解决方案可以解决 d3-interpolate 库的问题,但是还会有新的问题,也是因为使用了 require

require() of ES Module /home/projects/paripjqkq.github/node_modules/lodash-es/lodash.js from /home/projects/paripjqkq.github/node_modules/@antv/path-util/lib/parse-path.js not supported. Instead change the require of lodash.js in /home/projects/paripjqkq.github/node_modules/@antv/path-util/lib/parse-path.js to a dynamic import() which is available in all CommonJS modules.

以前的相关修复:antvis/G2#3141


请问是否可以协助确认,是否是 g2 生态的库使用了 cjs 语法导致的问题,以及能否建议一定的解决方案?如果能解决 esm 模块中的 cjs 导入就好了。

💻 Link to minimal reproduction

https://stackblitz.com/edit/github-cibroa?file=app.vue

🏞 Expected result

可以正常引入 G2Plot 并使用。

🚑 Any additional [like screenshots]

  • G2Plot Version:
  • Platform:
@AnzhiZhang AnzhiZhang added the Question Further information is requested label May 22, 2024
@AnzhiZhang
Copy link
Author

在 Nuxt 官方提供的指导下(https://nuxt.com/docs/guide/concepts/esm#transpiling-libraries),设置 transpile,暂时可以使用了

build: {
    transpile: [
        "@antv",
    ],
},

但是该文档还提到

If you encounter these errors, the issue is almost certainly with the upstream library. They need to fix their library to support being imported by Node.

方便的话还是烦请帮忙检查一下 CJS 的语法问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant