Next.js problem with @ant-design/charts, error

Question

I work on a large project (monorepo). The technology stack is Next, Apollo GraphQL, Ant-Design. I wanted to add the @ant-design/charts package, but it crashes the error below. I have run out of ideas for repair: c

Error on page:

    ../../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

Terminal:

(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

Closed, installing sub package @ant-design/plots solved my problem

Answer 2

Use dynamic import of Next.js and false server side rendering for this module.

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;