React中使用Nivo库无法渲染柱状图的问题求助

问题描述 #

按照Nivo官方文档实现柱状图，添加设置高度的父div后，浏览器控制台抛出如下错误：

nivo-bar.es.js:477 Uncaught TypeError: Object(...) is not a function
    at e (nivo-bar.es.js:477:1)
    at pe (nivo-bar.es.js:615:1)
    at ye (nivo-bar.es.js:748:1)
    at ke (nivo-bar.es.js:917:1)
    at renderWithHooks (react-dom.development.js:16317:1)
    at mountIndeterminateComponent (react-dom.development.js:19987:1)
    at beginWork (react-dom.development.js:21457:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4113:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4162:1)
    at invokeGuardedCallback (react-dom.development.js:4224:1)
    at beginWork$1 (react-dom.development.js:27244:1)
    at performUnitOfWork (react-dom.development.js:26380:1)
    at workLoopSync (react-dom.development.js:26290:1)
    at renderRootSync (react-dom.development.js:26259:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25556:1)
    at workLoop (scheduler.development.js:260:1)
    at flushWork (scheduler.development.js:234:1)
    at performWorkUntilDeadline (scheduler.development.js:518:1)
    at run (setImmediate.js:48:1)
    at runIfPresent (setImmediate.js:83:1)
    at onGlobalMessage (setImmediate.js:125:1)

项目中Nivo折线图、饼图均可正常渲染，实现代码及依赖配置如下：

柱状图组件代码 #

// install (please make sure versions match peerDependencies)
// yarn add @nivo/core @nivo/bar
import React from 'react'
import { render } from "react-dom";
import { ResponsiveBar } from '@nivo/bar'

// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
const BarChart = ({ data /* see data tab */ }) => {
  console.log(data)
  return (
    <div style={{ height: 400 }}>
    <ResponsiveBar
        data={data}
        keys={[
            'hot dog',
            'burger',
            'sandwich',
            'kebab',
            'fries',
            'donut'
        ]}
        indexBy="country"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={{ type: 'linear' }}
        indexScale={{ type: 'band', round: true }}
        colors={{ scheme: 'nivo' }}
        defs={[
            {
                id: 'dots',
                type: 'patternDots',
                background: 'inherit',
                color: '#38bcb2',
                size: 4,
                padding: 1,
                stagger: true
            },
            {
                id: 'lines',
                type: 'patternLines',
                background: 'inherit',
                color: '#eed312',
                rotation: -45,
                lineWidth: 6,
                spacing: 10
            }
        ]}
        fill={[
            {
                match: {
                    id: 'fries'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'sandwich'
                },
                id: 'lines'
            }
        ]}
        borderColor={{
            from: 'color',
            modifiers: [
                [
                    'darker',
                    1.6
                ]
            ]
        }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: 'country',
            legendPosition: 'middle',
            legendOffset: 32
        }}
        axisLeft={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: 'food',
            legendPosition: 'middle',
            legendOffset: -40
        }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{
            from: 'color',
            modifiers: [
                [
                    'darker',
                    1.6
                ]
            ]
        }}
        legends={[
            {
                dataFrom: 'keys',
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 120,
                translateY: 0,
                itemsSpacing: 2,
                itemWidth: 100,
                itemHeight: 20,
                itemDirection: 'left-to-right',
                itemOpacity: 0.85,
                symbolSize: 20,
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemOpacity: 1
                        }
                    }
                ]
            }
        ]}
        role="application"
        ariaLabel="Nivo bar chart demo"
        barAriaLabel={function(e){return e.id+": "+e.formattedValue+" in country: "+e.indexValue}}
    />
    </div>
  )
}

export default BarChart

package.json依赖 #

"dependencies": {
    "@nivo/bar": "^0.80.0",
    "@nivo/core": "^0.80.0",
    "@nivo/line": "^0.80.0",
    "@nivo/pie": "^0.80.0",
    "@nivo/radar": "^0.80.0",
    "@reduxjs/toolkit": "^1.9.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-scripts": "^2.1.3",
    "react-select": "^5.7.0",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4"
  },

原因分析 #

问题核心在于react-scripts版本过低：你使用的react-scripts是2.1.3，这个版本发布于2018年，无法兼容React 18和Nivo 0.80.0中使用的现代JS语法，导致编译Nivo柱状图组件时出现函数调用错误。其他图表能正常渲染是因为它们的代码未涉及这些低版本不支持的语法。

解决方案 #

1. 升级react-scripts到兼容版本 #

执行以下命令升级到稳定兼容的版本：

npm install react-scripts@5.0.1 --save
# yarn用户执行：
yarn add react-scripts@5.0.1

2. 清理缓存并重启项目 #

# 清理依赖缓存
rm -rf node_modules package-lock.json
# yarn用户执行：rm -rf node_modules yarn.lock

# 重新安装依赖
npm install
# yarn用户执行：yarn install

# 重启项目
npm start
# yarn用户执行：yarn start

3. 额外检查 #

• 确保@nivo/bar和@nivo/core版本完全一致（你当前配置已满足，均为0.80.0），版本不匹配会引发各类兼容性问题。
• 移除代码中未使用的import { render } from "react-dom";，减少不必要的依赖。
• 验证传入BarChart的data格式是否符合Nivo要求，示例数据结构如下：

  const sampleData = [
    { country: 'USA', 'hot dog': 100, burger: 150, sandwich: 80, kebab: 60, fries: 200, donut: 120 },
    { country: 'France', 'hot dog': 70, burger: 90, sandwich: 120, kebab: 50, fries: 180, donut: 100 }
  ]
  

内容的提问来源于stack exchange，提问作者Mark