ReferenceError: ResizeObserver 没有用 nivo 和 NextJS 定义

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 而不是 Pie 时出现。我也尝试让它与 React 项目一起使用，但虽然我没有收到此错误，但似乎没有显示任何内容。

编辑：

经过一番调查，@nivo/core 0.79.0 依赖似乎有问题。我们应该在 GitHub 存储库上打开一个问题。我做了一些更改以检查它是否是由我的 Next.js 版本引起的，但该错误仅发生在 @nivo/core 0.79.0 中。

Answer 1

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

您应该将@nivo/core 更新为0.79.1。

---

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

为避免在服务器上导入MyPie（以及随后的ResponsivePie），您可以仅在客户端使用next/dynamic 和ssr: 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，您可能只需添加一个检查以仅运行该部分代码。

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