ReferenceError: ResizeObserver is not defined：Gatsby with nivo

Question

我使用@nivo/pie 和 "gatsby": "^3.13.0"。但是当我构建 gatsby 时出现错误。 WebpackError: ReferenceError: ResizeObserver is not defined Nivo 的版本是“@nivo/pie”：“^0.79.1”。我不知道要解决它。如果您能给我一些建议，我将不胜感激。

这里是使用 nivo 饼图的 React 代码。

PieChart.tsx

import React from 'react'
import { ResponsivePie } from '@nivo/pie'

const PieChart: React.FC = ({ data }) => {
  return (
    <>
      <div>
        <ResponsivePie
            data={data}
            margin={{ top: 30, right: 80, bottom: 70, left: 80 }}
            borderColor={{
                from: 'color',
                modifiers: [
                    [
                        'darker',
                        0.2,
                    ],
                ],
            }}
            arcLabelsTextColor={{
                from: 'color',
                modifiers: [
                    [
                        'darker',
                        2,
                    ],
                ],
            }}
            fill={[
                {
                    match: {
                        id: 'ruby',
                    },
                    id: 'dots',
                },
            ]}
            legends={[
              {
                  anchor: 'bottom-right',
                  direction: 'column',
                  justify: false,
                  translateX: 0,
                  translateY: -1,
              },
          ]}
          />
      </div>
    </>
  )
}

export default PieChart

============================================= ======================

我可以在更新 gatsby-node.js 后修复它。但是我得到了另一个错误 WebpackError: Minified React error #130;。我可以通过这个最终代码修复它。没有构建错误。

PieChart.tsx

import React from 'react'
import { ResponsivePie } from '@nivo/pie'

const PieChart: React.FC = ({ data }) => {
  return (
    <>
        {typeof window !== 'undefined' && ResponsivePie &&
        <ResponsivePie
            data={data}
            ...  
        />}
    </>
  )
}

export default PieChart

谢谢。

Answer 1

尝试在 Gatsby 的 SSR 上使用空加载器。在你的 gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@nivo\/pie/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

通常这种问题（gatsby develop OK vs gatsby build KO）与webpack在服务器上的捆绑有关（Server-Side Rendering），尤其是在像图表模块那样处理 third-party dependencies that interact with the window or other global objects（例如 document）时。发生这种情况是因为当您运行 gatsby build 您的代码由节点服务器解释时，那里还没有 window 可用。另一方面，gatsby develop 是由浏览器解释的，那里有

使用这种方法，您将向 webpack 添加虚拟加载程序 (null) 以加载对 client-side 的依赖，其中 window 可用。

请记住 test: /@nivo\/pie/ 是测试 node_modules 文件夹的正则表达式（这就是斜杠之间的原因 /），因此请确保 /@nivo\/pie/ 是一个有效路径。

ReferenceError: ResizeObserver is not defined：Gatsby with nivo

ReferenceError: ResizeObserver is not defined：Gatsby with nivo

javascript

reactjs

gatsby

nivo-react