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.

Solution

Try using a null loader on Gatsby's SSR. In your gatsby-node.js:

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

Normally this kind of issue (gatsby develop OK vs gatsby build KO) are related to webpack's bundling on the server (Server-Side Rendering), especially when dealing with third-party dependencies that interact with the window or other global objects (such as document) like chart modules do. This happens because when you run gatsby build your code is interpreted by the Node server, where there's no window available yet. On the other hand, gatsby develop is interpreted by the browser, where there is.

With this approach, you are adding a dummy loader (null) to webpacks to load the dependency on the client-side, where the window is available.

Keep in mind that test: /@nivo\/pie/ is a regular expression (that's why is between slashes, /) that tests the node_modules folder so ensure that /@nivo\/pie/ is a valid path.