1

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

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

饼图.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;。我可以通过这个最终代码修复它。没有构建错误。

饼图.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

谢谢你。

4

1 回答 1

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 developOK vs KO ）gatsby build与 webpack 在服务器上的捆绑（服务器端渲染）有关，尤其是在处理与图表或其他全局对象（例如）交互的第三方依赖项时模块做。发生这种情况是因为当您运行代码时，节点服务器会解释您的代码，此时还没有可用的窗口。另一方面，是由浏览器解释的，那里有。windowdocumentgatsby buildgatsby develop

使用这种方法，您null将向 webpacks 添加一个虚拟加载器 ( ) 以加载客户端上可用的依赖项window。

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

于 2022-02-22T12:23:01.503 回答