[V5] 使用自定义注册节点后控制台报错Error [ERR_REQUIRE_ESM]

[chris-deng]

• node版本: v18
• antv/g6版本：5.0.21
• antv/g2版本：5.2.5
• react版本：17

使用https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo这个案例，将节点替换成自定义节点活动图

控制台报错：
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/test-topoly/node_modules/d3-color/src/index.js from /Users/test-topoly/node_modules/@antv/g-lite/dist/index.js not supported.
Instead change the require of /Userstest-topoly/node_modules/d3-color/src/index.js in /Users/test-topoly/node_modules/@antv/g-lite/dist/index.js to a dynamic import() which is available in all CommonJS modules.

GraphOptions：

import { ElementDatum, GraphOptions } from '@antv/g6';

export const graphOptions: GraphOptions = {
  zoom: 0.8,
  autoFit: 'view',
  // container: ref.current,
  // width: 500,
  // height: 300,
  node: {
    type: 'circle',
    // type: 'activity-chart',
    style: {
      // value: mockData(),
      size: 80,
      radius: 8,
      labelText: (d) => d.id,
      fill: '#fff',
      lineWidth: 1,
      stroke: '#ccc', // border
      iconFontFamily: 'iconfont',
      iconText: '\ue77c',
      iconFill: '#ddd',
      ports: [{ placement: 'left' }, { placement: 'right' }],
      labelWordWrap: true,
      badges: [
        // 徽标
        {
          text: 'A',
          placement: 'right-top',
        },
      ],
      badgePadding: [2, 4],
      badgeBackgroundFill: '#278dfb',
    },
    palette: {
      field: (d: ElementDatum) => d.combo as string,
    },
  },
  edge: {
    type: 'cubic-horizontal',
    style: (edgeItem) => {
      return {
        labelText: (edgeItem.text as string) || edgeItem.id,
        endArrow: true,
        lineDash: [5, 5],
        labelFontSize: 10,
        labelMaxWidth: 50,
        labelWordWrap: true,
        labelBackground: true,
        labelBackgroundFill: '#fff',
        labelMaxLines: 2,
      };
    },
  },
  combo: {
    type: 'rect',
    style: {
      radius: 8,
      labelText: (d) => d.id,
      lineDash: 0,
      collapsedLineDash: [5, 5],
    },
  },
  layout: {
    type: 'antv-dagre',
    rankdir: 'LR',
    ranksep: 50,
    nodesep: 5,
    sortByCombo: true,
  },
  plugins: [
    {
      type: 'tooltip',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      getContent: (e: unknown, items: any[]) => {
        let result = `<h4>Custom Content</h4>`;
        items.forEach((item) => {
          console.log(32, item);
          result += `<p>Type: ${item.data?.discription}</p>`;
        });
        return result;
      },
    },
  ],
  behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
};

自定义节点的注册：参考https://g6-next.antv.antgroup.com/examples/element/custom-node/#g2-activity-chart 这个活动图

const mockData = () => {
  const getRandomPercent = () => +(Math.random() * 0.9 + 0.1).toFixed(1);

  return [
    {
      name: 'activity3',
      percent: getRandomPercent(),
      // color: '#1ad5de',
      color: 'red',
    },
  ];
};

register(ExtensionCategory.NODE, 'activity-chart', ActivityChart);

求帮忙看看怎么解决这个报错

---

如果不使用g2的自定义节点，则不会报错，但是docker镜像打包后运行，页面报错：
vendor.a5ed4250.js:27 TypeError: Cannot read properties of undefined (reading 'constant')

有没有遇到相同问题的同学