如何在nuxt3中使用g2图表

[guanbiao33]

请问如何在nuxt3中使用g2图表？

---

官方文档好像没有介绍如何在ssr框架中使用，搜索引擎里面只有nuxt2的使用方法，按照文档直接使用nuxt3框架中会报错，可以指点一下吗？

[hustcc]

具体是报什么错？可以在 codesandbox 中来一个案例吗？

[xcy960815]

同样的问题+1，复现方法就是按照在vue中的常规的流程

npm i g2 -S

在nuxt3中的.vue文件

import { Chart } from '@antv/g2';
const initChart = () => {
  // 准备数据
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  // 初始化图表实例
  const chart = new Chart({
    container: 'container',
    theme: 'classic',
  });

  // 声明可视化
  chart
    .interval() // 创建一个 Interval 标记
    .data(data) // 绑定数据
    .encode('x', 'genre') // 编码 x 通道
    .encode('y', 'sold'); // 编码 y 通道

  // 渲染可视化
  chart.render();
}
onMounted(() => {
  initChart()
})

然后控制台报错

[10:35:48 AM] Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/@antv/g2/lib/mark/utils.js not supported.
Instead change the require of index.js in /node_modules/@antv/g2/lib/mark/utils.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/node_modules/@antv/g2/lib/mark/utils.js:4:24)
    at Object.<anonymous> (/node_modules/@antv/g2/lib/mark/interval.js:4:17)
    at Object.<anonymous> (/node_modules/@antv/g2/lib/mark/index.js:4:18)
    at Object.<anonymous> (/node_modules/@antv/g2/lib/stdlib/index.js:6:16)
    at Object.<anonymous> (/node_modules/@antv/g2/lib/runtime/render.js:12:18)
    at Object.<anonymous> (/node_modules/@antv/g2/lib/runtime/index.js:19:16)
    at Object.<anonymous> (/node_modules/@antv/g2/lib/index.js:20:17) {
  code: 'ERR_REQUIRE_ESM'
}

问题较好复现。

[xcy960815]

按照平时使用就行，需要给组件包裹 client-only 标签，测试过启动打包没有问题

[hustcc]

按照平时使用就行，需要给组件包裹 client-only 标签，测试过启动打包没有问题

所以感觉是 ssr 的问题？当前 G2 的单侧，其实是在 node 中跑的，但是需要使用 node 环境的 canvas 去渲染。

[JonasJonny]

@hustcc Hello, is it possible to run G2 through Express/SSR?

I'm still getting
"@antv/g2": "4.2.8",

require() of ES Module /.../d3-interpolate/src/index.js from /.../node_modules/@antv/g-base/lib/animate/timeline.js not supported.

"@antv/g2": "^5.0.17"

require() of ES Module /.../@antv/g2/node_modules/d3-hierarchy/src/index.js from /.../node_modules/@antv/g2/lib/mark/utils.js not supported.
Instead change the require of index.js in /.../node_modules/@antv/g2/lib/mark/utils.js to a dynamic import() which is available in all CommonJS modules.

I didn't find any solution/example anywhere.

[hustcc]

Maybe we should send a issue to d3 repo.

[JonasJonny]

#FYI @hustcc

...We discovered that as of June 2021, the D3 project had updated most of the D3 libraries to support only ESM. Specifically, most D3 projects changed package.json to "type": "module" and only shipped ESM code files, dropping support for CommonJS.

Source: https://formidable.com/blog/2022/victory-esm/

[xcy960815]

按照平时使用就行，需要给组件包裹 client-only 标签，测试过启动打包没有问题

所以感觉是 ssr 的问题？当前 G2 的单侧，其实是在 node 中跑的，但是需要使用 node 环境的 canvas 去渲染。

这个不是很清楚，刚开始玩ssr，我猜测是不是g2还是d3这些库里面使用的api不支持服务端渲染，猜测灵感来自于element-plus，里面所有的悬浮组件都不支持服务端渲染，都得需要加 client-only 使其在客户端渲染

[hustcc]

这个 issue 讨论中，看看是否有 nuxt 高阶用户，帮忙来增加一个 G2 在 nuxt 使用的文档？🙏🏻🙏🏻🙏🏻

[xcy960815]

这个 issue 讨论中，看看是否有 nuxt 高阶用户，帮忙来增加一个 G2 在 nuxt 使用的文档？🙏🏻🙏🏻🙏🏻

其实我认为意义不大，虽然我也是用在nuxt中使用g2，使用方式跟vue中一模一样，只要解决那个es module 加载bug就行，现在我已经大致找到解决方法，我在看如何提交pr