1

我想将 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 中。

4

2 回答 2

2

它看起来@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;
于 2022-02-13T21:39:50.503 回答
0

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

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

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

于 2022-02-11T19:55:52.513 回答