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 ，您可能只需添加一个检查以仅运行该部分代码。

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