Next js problem with @ant-design/charts, error location: node_modules\@antv\x6-react-components\es\toolbar\item.js

[kostazol]

I got error on compile

./node_modules/antd/es/popover/style/index.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules@antv\x6-react-components\es\color-picker\index.js

Import trace for requested module: ./node_modules/@antv/x6-react-components/es/color-picker/index.js ./node_modules/@antv/x6-react-components/es/index.js ./node_modules/@antv/xflow-extension/es/canvas-context-menu/components/index.js ./node_modules/@antv/xflow-extension/es/canvas-context-menu/index.js ./node_modules/@antv/xflow-extension/es/index.js ./node_modules/@ant-design/flowchart/es/index.js ./node_modules/@ant-design/charts/es/index.js ./features/nodeInfo/view/NodeChart/NodeChart.tsx ./features/nodeInfo/index.tsx ./modules/HomePage/HomePage.tsx ./modules/index.ts ./pages/index.tsx

I don't have this error on version 1.1.16, and I have this error on version 1.3.6

[williampeterpaul]

Same issue with 1.3.6

[williampeterpaul]

Related to @antv/g2 version 4.2.0, manually installing that sub-package at version 4.1.50 fixed

[williampeterpaul]

For anyone else experiencing this issue, remember to persist an updated package-lock.json file to fix any failing builds. This one caught me out.

[devgurbir]

Hi @williampeterpaul,

I'm getting this error. Could you please explain the solution in a simplified manner? Noob here.

[williampeterpaul]

@devgurbir

@ant-design/charts requires @ant/g2 but the latest version (4.2.0) of g2 seems to be causing this issue. By manually installing an older version of g2 (4.1.50) and rebuilding the dependency tree (delete package-lock) you can temporarily circumvent the issue

[devgurbir]

@williampeterpaul Had to mess around a bit but it worked eventually :)

Thank you so much.

[williampeterpaul]

@devgurbir No problem man, glad I could help.

[showarp]

Please repair this bug as soon as possible

[lxfu1]

The problem lies in @ant-design/flowchart, it is recommended to use subpackages or configure:

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