'ReferenceError: ResizeObserver is not defined:Gatsby with nivo

I use @nivo/pie with "gatsby": "^3.13.0". But I got an error when I gatsby build. WebpackError: ReferenceError: ResizeObserver is not defined Nivo's version is "@nivo/pie": "^0.79.1". I have no idea to solve it. I would be appreciate if you could give me some advice.

And here is the React code using nivo's pie chart.

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

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

I could fix it after I updated gatsby-node.js. But I got another error WebpackError: Minified React error #130;. And I could fix it by this final code. There's no build error.

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

Thank you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source