How can I solve Next.js and Antv Graphin "Global CSS cannot be imported from within node_modules" issue?

Question

I'm trying to use Graphin with Next.js but getting this error:

./node_modules/@antv/graphin/es/components/Legend/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\@antv\graphin\es\components\Legend\Node.js

I saw the solution for the same issue and tried to reproduce it. Firstly, I created the component that returns <Graphin /> and use the code from the solution:

// Import the 'dynamic' function from 'next/dynamic'
import dynamic from "next/dynamic";

// Dynamically import your component
const MyGraphineComponent = dynamic(() => import("./myGraphineComponent"), {
  ssr: false,  // disable server-side rendering for this component
});

export default function MyView() {
  return (
    <div style={{ height: "100%" }}>
      <MyGraphineComponent data={[]} />
    </div>
  );
}

Then I used dynamic() to import Graphin itself inside my component:

import dynamic from "next/dynamic";
const Graphin = dynamic(
    () => import("@antv/graphin"),
    {
        ssr: false,
    }
);

However, I'm still getting the error mentioned above. How can I solve this issue?

---

Versions of the libraries:

• "react": "^18.2.0"
• "next": "13.5.6"
• "@antv/graphin": "^2.7.27"