带有@ant设计/图表的Next.js问题，错误

Question

我从事一个大型项目(monorepo)。技术栈是下一个，阿波罗GraphQL，蚂蚁设计。我想添加@ant-design/曲线图包，但是它会导致下面的错误崩溃。我想不出修理的办法了

页面上的错误：

    ../../node_modules/@antv/xflow/dist/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/@ant-design/flowchart/es/graph/index.js

航站楼：

(node:40023) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
error - ../../node_modules/@antv/xflow/dist/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm

Answer 1

关闭，安装子程序包@ant-design/绘图解决了我的问题

Answer 2

使用动态导入的Next.js和错误的服务器端呈现为该模块。

import dynamic from 'next/dynamic';
const Line = dynamic(() => import('@ant-design/charts').then(({ Line }) => Line),
    { ssr: false }
);

const data = [
    {
        year: '1991',
        value: 3,
    },
    {
        year: '1992',
        value: 4,
    }
]

const LineChart = () => {

    const config = {
        data: data,
        xField: 'year',
        yField: 'value',
        label: {},
        point: {
            size: 5,
            shape: 'diamond',
            style: {
                fill: 'white',
                stroke: '#5B8FF9',
                lineWidth: 2,
            },
        },
        tooltip: { showMarkers: true },
        state: {
            active: {
                style: {
                    shadowBlur: 4,
                    stroke: '#000',
                    fill: 'red',
                },
            },
        },
        interactions: [{ type: 'marker-active' }],
        slider: {
            start: 0.1,
            end: 0.8,
        },
    };

    return (
        <div>
            <Line {...config} />
        </div>
    );

};

export default LineChart;