ReferenceError：未使用 nivo 和 NextJS 定义 ResizeObserver

Question

我想将 nivo 与 Next 一起使用，但是当我加载包含用 nivo 制作的饼图的页面时，出现以下错误：ReferenceError: ResizeObserver is not defined。

我的Pie.js组件：

import { ResponsivePie } from "@nivo/pie";

export const data = [
  {
    id: "c",
    label: "c",
    value: 80,
    color: "hsl(8, 70%, 50%)",
  },
  {
    id: "lisp",
    label: "lisp",
    value: 188,
    color: "hsl(122, 70%, 50%)",
  },

  {
    id: "go",
    label: "go",
    value: 161,
    color: "hsl(111, 70%, 50%)",
  },
];

export default function MyPie({ data }) {

    return (
        <ResponsivePie
            data={data}
            margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
            innerRadius={0.5}
            padAngle={0.7}
            cornerRadius={3}
            activeOuterRadiusOffset={8}
            borderWidth={1}
            borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
            arcLinkLabelsSkipAngle={10}
            arcLinkLabelsTextColor="#333333"
            arcLinkLabelsThickness={2}
            arcLinkLabelsColor={{ from: "color" }}
            arcLabelsSkipAngle={10}
            arcLabelsTextColor={{ from: "color", modifiers: [["darker", 2]] }}
            defs={[
            {
                id: "dots",
                type: "patternDots",
                background: "inherit",
                color: "rgba(255, 255, 255, 0.3)",
                size: 4,
                padding: 1,
                stagger: true,
            },
            {
                id: "lines",
                type: "patternLines",
                background: "inherit",
                color: "rgba(255, 255, 255, 0.3)",
                rotation: -45,
                lineWidth: 6,
                spacing: 10,
            },
            ]}
        />
    )
};

我的chart.js页面：

import MyPie, { data } from "../components/Pie";

import homeStyles from "../styles/Home.module.css";

function Chart() {
  return (
    <div className={homeStyles.divchart}>
      <MyPie data={data}/>
    </div>
  );
};
export default Chart;

ResponsivePie此错误仅在使用and时出现Pie。我还尝试使其与 React 项目一起使用，但尽管我没有收到此错误，但似乎没有显示任何内容。

编辑：

经过一番调查，看起来@nivo/core 0.79.0依赖有问题。我们应该在 GitHub 存储库上提出一个问题。我做了一些更改来检查这是否是由我的 Next.js 版本引起的，但该错误仅出现在 @nivo/core 0.79.0 上。

Answer 1

事实证明，这是 version 中引入的错误的结果，该错误已在https://github.com/plouc/nivo/pull/18860.79.0中修复。

您应该更新@nivo/core到0.79.1.

它看起来@nivo/pie与 Next.js 服务器端渲染不兼容，因为它使用 Web API ( ResizeObserver)。

为了避免在服务器上导入MyPie（以及随后），您可以仅使用withResponsivePie在客户端动态导入它。next/dynamicssr: false

import dynamic from "next/dynamic";
import { data } from "../components/Pie";
import homeStyles from "../styles/Home.module.css";

const MyPie = dynamic(() => import("../components/Pie"), {
    ssr: false
})

function Chart() {
    return (
        <div className={homeStyles.divchart}>
            <MyPie data={data}/>
        </div>
    );
};

export default Chart;

Answer 2

代码很可能正在服务器端（SSR）上运行，并且ResizeObserver那里不存在。您应该尝试确保您的代码仅在客户端执行。

我很难告诉你如何做，因为我不知道你的设置是什么。ResizeObserver您可能只需添加一个检查以仅运行定义的那部分代码。

我希望至少这能为您指明正确的方向。