ReferenceError：Highcharts 未定义（React JS）答案

【问题标题】：ReferenceError: Highcharts is not defined(React JS)ReferenceError：Highcharts 未定义（React JS）
【发布时间】：2021-06-03 03:44:05
【问题描述】：

我有这个错误 ReferenceError: Highcharts is not defined，我被这个错误困扰了几天，你能帮帮我吗。

我有仪表板和图表文件，将图表组件导入仪表板。

我尝试在一个单独的 react 项目上创建图表组件，它工作正常。

但是当我尝试将 Chart 组件集成到我的主项目中时，它会显示参考错误。 error message image

https://github.com/wilmer090/dashboard/tree/feature-charts 或 '.Please see the code of components here

import React, {useState, useEffect} from 'react'
import Highcharts, { Pointer } from 'highcharts'
import HighchartsReact from 'highcharts-react-official-fix'
import {Typography} from '@material-ui/core'
import Modal from './components/Modal'




const thirdSetSample = [{...},{...}...]
const sample = thirdSetSample.reduce((accu, curr) => {
  const date = new Date(curr.date_created);
  if (!accu[date]) {
    accu[date] = [];
  }
  accu[date].push(curr);
  return accu;
}, {});


const arr = Object.keys(sample).map((time) => {
  return {
    x:time,
    y: sample[time].length
  };
});

console.log('arr',arr)



const Chart = () =>{
  
  const [isModalOpen, setIsModalOpen] = useState(false)
  
  function handleOpenModal(time, arrayTableValue){
    let props = {}
    const dateTimeToString = time.toString()

    arrayTableValue.forEach(item => item.date_created  = new Date(item.date_created).toString())
  

    const filterForModalTable = arrayTableValue.filter(item => item.date_created == time)
    console.log('updated value',filterForModalTable)
  
    setIsModalOpen(isModalOpen => !isModalOpen)
    props = {...props, time:time, value:thirdSetSample}
  }


  const options = {  
    chart:{
      type:'spline'
    },
    title:{
      text: 'Articles Published'
    },
    xAxis: {
        type: 'datetime' //ensures that xAxis is treated as datetime values
    },
    yAxis: {
      title:{
        text: 'Articles'
      }
    },
    plotOptions:{
      series:{
        cursor: 'Pointer',
        point:{
          events:{
            click: function(){
              handleOpenModal(this.x, thirdSetSample)
              // alert("Category: "  + " Articles: " + this.y)
              //alert(JSON.stringify(filterForModalTable))
            }
          }
        }
      }
    },
    tooltip: {
      formatter: function() {
          return '<b>'+ Highcharts.numberFormat(this.y, 0) + ' Article' +'</b><br/>'+ Highcharts.dateFormat('%y-%m-%d %l:%M:%P', this.x,true);
      }
    },
    legend: {
      enabled:false
    },
    series: [{
    
      // number of articles published example
      data: (function(){
          return arr.map(item =>{
            return {x: new Date(item.x), y: item.y}
          })
      }()),
      pointInterval: 3600000,    
    }]
    }

  return(
    <>
      <Typography variant="h1">Chart Sample</Typography>
      <Modal isModalOpen={isModalOpen}/>
    
      <HighchartsReact highcharts={Highcharts} options={options} />
  
    </>
  )
}

export default Chart

【问题讨论】：

你能分享确切的错误信息吗？
我已经为错误信息添加了上面的链接
您确定您正确安装了 HighCharts 吗？我可以看看你的 package.json 吗？
当然，给你jsfiddle.net/ctrlC/u05v8r6m/8

标签： javascript reactjs highcharts

【解决方案1】：

我尝试在单独的 React 项目中创建图表组件，并且它工作正常。

但是当我尝试将 Chart 组件集成到我的主项目中时，它会显示参考错误。

Highchart 可能未安装在您的主项目中。即使您安装了它，您的项目也无法访问它。通过控制台登录到 highchart window.Highcharts 的开发工具来验证这一点。

如果你得到undefined，你需要添加/附加highchart到窗口对象。

import Highcharts from "highcharts";

window.Highcharts = Highcharts;

如果您依赖 highchats 的其他功能，例如向下钻取，您也应该将它们导入到您的主项目中。

// Do this before assigning Highchat to window

require("highcharts/modules/heatmap")(Highcharts);
require("highcharts/modules/sunburst")(Highcharts);
const Drilldown = require("highcharts/modules/drilldown");

if (Drilldown) {
  Drilldown(Highcharts);
}
require("highcharts/modules/map")(Highcharts);
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/solid-gauge")(Highcharts);
require("highcharts/modules/funnel")(Highcharts);
require("highcharts/modules/bullet")(Highcharts);
require("highcharts/modules/treemap")(Highcharts);

【讨论】：