Next.js集成Ant Design Charts时出现ES Module require兼容服务器错误

已安装@ant-design/charts和@ant-design/plots依赖，运行时出现以下服务器错误：

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

当前使用的组件代码：

import React, { useEffect, useRef } from 'react'
import { Chart } from '@antv/g2'

const LineChart = () => {
    const chartContainerRef = useRef(null)

    useEffect(() => {
        const data = [
            { month: 'Jan', city: 'Tokyo', temperature: 7 },
            { month: 'Jan', city: 'London', temperature: 3.9 },
            { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
            { month: 'Feb', city: 'London', temperature: 4.2 },
            { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
            { month: 'Mar', city: 'London', temperature: 5.7 },
            { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
            { month: 'Apr', city: 'London', temperature: 8.5 },
            { month: 'May', city: 'Tokyo', temperature: 18.4 },
            { month: 'May', city: 'London', temperature: 11.9 },
            { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
            { month: 'Jun', city: 'London', temperature: 15.2 },
            { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
            { month: 'Jul', city: 'London', temperature: 17 },
            { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
            { month: 'Aug', city: 'London', temperature: 16.6 },
            { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
            { month: 'Sep', city: 'London', temperature: 14.2 },
            { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
            { month: 'Oct', city: 'London', temperature: 10.3 },
            { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
            { month: 'Nov', city: 'London', temperature: 6.6 },
            { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
            { month: 'Dec', city: 'London', temperature: 4.8 },
        ]

        const chart = new Chart({
            container: chartContainerRef.current,
            autoFit: true,
        })

        chart
            .data(data)
            .encode('x', 'month')
            .encode('y', 'temperature')
            .encode('color', 'city')
            .scale('x', {
                range: [0, 1],
            })
            .scale('y', {
                nice: true,
            })
            .axis('y', { labelFormatter: (d) => d + '°C' })

        chart.line().encode('shape', 'smooth')

        chart.point().encode('shape', 'point').tooltip(false)

        chart.render()

        return () => {
            chart.destroy()
        }
    }, [])

    return <div ref={chartContainerRef}></div>
}

export default LineChart

解决方案 #

1. 降级d3-hierarchy版本 #

错误根源是d3-hierarchy 8.x及以上版本改为纯ES模块，而@antv/g2-extension-plot仍使用CommonJS的require()加载它，导致兼容问题。安装7.x版本的d3-hierarchy即可解决：

npm install d3-hierarchy@^7.8.5
# 或使用yarn
yarn add d3-hierarchy@^7.8.5

2. 改用@ant-design/charts封装组件 #

你当前直接使用底层的@antv/g2，可以换成@ant-design/charts提供的封装组件，它已经处理了依赖兼容问题，代码更简洁：

import React from 'react';
import { Line } from '@ant-design/charts';

const LineChart = () => {
  const data = [
    { month: 'Jan', city: 'Tokyo', temperature: 7 },
    { month: 'Jan', city: 'London', temperature: 3.9 },
    { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
    { month: 'Feb', city: 'London', temperature: 4.2 },
    { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
    { month: 'Mar', city: 'London', temperature: 5.7 },
    { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
    { month: 'Apr', city: 'London', temperature: 8.5 },
    { month: 'May', city: 'Tokyo', temperature: 18.4 },
    { month: 'May', city: 'London', temperature: 11.9 },
    { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
    { month: 'Jun', city: 'London', temperature: 15.2 },
    { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
    { month: 'Jul', city: 'London', temperature: 17 },
    { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
    { month: 'Aug', city: 'London', temperature: 16.6 },
    { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
    { month: 'Sep', city: 'London', temperature: 14.2 },
    { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
    { month: 'Oct', city: 'London', temperature: 10.3 },
    { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
    { month: 'Nov', city: 'London', temperature: 6.6 },
    { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
    { month: 'Dec', city: 'London', temperature: 4.8 },
  ];

  const config = {
    data,
    xField: 'month',
    yField: 'temperature',
    seriesField: 'city',
    smooth: true,
    point: {
      shape: 'point',
      tooltip: false,
    },
    yAxis: {
      label: {
        formatter: (d) => `${d}°C`,
      },
    },
    autoFit: true,
  };

  return <Line {...config} />;
};

export default LineChart;

3. 框架层面配置模块转译（针对Next.js等SSR框架） #

如果使用Next.js这类服务端渲染框架，可以在配置文件中把相关依赖加入转译列表，让框架处理模块格式转换：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@antv/g2-extension-plot', 'd3-hierarchy'],
};

module.exports = nextConfig;

内容的提问来源于stack exchange，提问作者cycero