使用React官方封装渲染Highcharts X-range图表报未定义错误如何解决

• 第一步：确认依赖已正确安装
  先执行以下命令安装所需依赖：

  npm install highcharts highcharts-react-official
  # 如果你用yarn则执行
  yarn add highcharts highcharts-react-official
  

• 第二步：补全X-range模块的导入与注册
  X-range是Highcharts的扩展模块，不属于核心包内置能力，你需要在导入Highcharts后额外引入该模块并完成注册，修改导入部分代码如下：

  import Highcharts from 'highcharts';
  import xrange from 'highcharts/modules/xrange';
  import HighchartsReact from 'highcharts-react-official';
  
  // 注册xrange模块
  xrange(Highcharts);
  

修改后的完整可运行代码如下：

import React, { useState } from 'react';
import Highcharts from 'highcharts';
import xrange from 'highcharts/modules/xrange';
import HighchartsReact from 'highcharts-react-official';

// 注册xrange模块
xrange(Highcharts);

const AccountContractHistory = (props) => {
    const [chartOptions, setChartOptions] = useState({
        chart: {
            type: 'xrange'
        },
        title: {
            text: 'Highcharts X-range'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: ''
            },
            categories: ['Prototyping', 'Development', 'Testing'],
            reversed: true
        },
        series: [{
            name: 'Project 1',
            borderColor: 'gray',
            pointWidth: 20,
            data: [{
                x: Date.UTC(2014, 10, 21),
                x2: Date.UTC(2014, 11, 2),
                y: 0,
                partialFill: 0.25
            }, {
                x: Date.UTC(2014, 11, 2),
                x2: Date.UTC(2014, 11, 5),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 8),
                x2: Date.UTC(2014, 11, 9),
                y: 2
            }, {
                x: Date.UTC(2014, 11, 9),
                x2: Date.UTC(2014, 11, 19),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 10),
                x2: Date.UTC(2014, 11, 23),
                y: 2
            }],
            dataLabels: {
                enabled: true
            }
        }],
    });

    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={chartOptions}
            />
        </div>
    )
};

export default AccountContractHistory;

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