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 } );

try this one.