G2Plot with nextjs. Stacked graph not working

Question

I want to create an stacked graph using G2plot. Because of this I have to create 2 files one for the component. Another for the page that will call component using dynamic I

import React, { useEffect, useRef } from "react";
import { Bar } from "@antv/g2plot";

const data = [
  {
    year: "1991",
    value: 3,
    type: "Lon",
  },
  {
    year: "1992",
    value: 4,
    type: "Lon",
  },
  {
    year: "1993",
    value: 3.5,
    type: "Lon",
  },
  {
    year: "1994",
    value: 5,
    type: "Lon",
  },
  {
    year: "1995",
    value: 4.9,
    type: "Lon",
  },
  {
    year: "1996",
    value: 6,
    type: "Lon",
  },
  {
    year: "1997",
    value: 7,
    type: "Lon",
  },
  {
    year: "1998",
    value: 9,
    type: "Lon",
  },
  {
    year: "1999",
    value: 13,
    type: "Lon",
  },
  {
    year: "1991",
    value: 3,
    type: "Bor",
  },
  {
    year: "1992",
    value: 4,
    type: "Bor",
  },
  {
    year: "1993",
    value: 3.5,
    type: "Bor",
  },
  {
    year: "1994",
    value: 5,
    type: "Bor",
  },
  {
    year: "1995",
    value: 4.9,
    type: "Bor",
  },
  {
    year: "1996",
    value: 6,
    type: "Bor",
  },
  {
    year: "1997",
    value: 7,
    type: "Bor",
  },
  {
    year: "1998",
    value: 9,
    type: "Bor",
  },
  {
    year: "1999",
    value: 13,
    type: "Bor",
  },
];

const Main = (
  {
    // data,
    // xAxis = "xAxis",
    // yAxis = "yAxis",
    // color = "#0D0E68",
  }
) => {
  const containerRef = useRef(null);
  let stackedBarPlot;
  useEffect(() => {
    stackedBarPlot = new Bar(containerRef.current, {
      data: data.reverse(),
      isStack: true,
      xField: "value",
      yField: "year",
      seriesField: "type",
      autoFit: true,
      label: {
        position: "left", // 'left', 'middle', 'right'
        layout: [
          { type: "interval-adjust-position" },
          { type: "interval-hide-overlap" },
          { type: "adjust-color" },
        ],
      },
    });
  }, []);

  useEffect(() => {
    stackedBarPlot.render();
  }, []);
  return (
    <>
      <div ref={containerRef}></div>
    </>
  );
};

export default Main;

File that will dynamic import

import React from "react";
import dynamic from "next/dynamic";
const Main = () => {
  const StackedBar = dynamic(
    () => import("../../../src/Components/StackedBar"),
    {
      ssr: false,
    }
  );
  return (
    <>
      <StackedBar />
    </>
  );
};
export default Main;

PS. I am using nextjs 10 Here is the codesandbox for my expected behavior https://codesandbox.io/s/optimistic-banach-up3i0?file=/index.js

Answer 1

It's turn out I have to install @antv/g2plot. before that, I was having @antv/g2. After installing the package every work perfect.