HighCharts Sankey + NextJS：TypeError：无法读取未定义的属性“Core/Series/Point.js”答案

【问题标题】：HighCharts Sankey + NextJS: TypeError: Cannot read property 'Core/Series/Point.js' of undefinedHighCharts Sankey + NextJS：TypeError：无法读取未定义的属性“Core/Series/Point.js”
【发布时间】：2022-01-27 09:08:36
【问题描述】：

我正在尝试使用HighCharts React 和NextJS 呈现HighCharts Sankey 图表。我已经按照 HighChart 关于如何添加 Sankey 模块的文档进行操作，但页面失败并出现以下错误：

TypeError: Cannot read property 'Core/Series/Point.js' of undefined

错误似乎发生在addSankeyModule，在图表实际初始化之前。以下是我的模块代码：

import React from "react"
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import addSankeyModule from "highcharts/modules/sankey"

addSankeyModule(Highcharts)

const options = {
      // omitted for brevity
}

const DependenciesChart: React.FC = () => (
      <HighchartsReact highcharts={Highcharts} options={options} />
)

export default DependenciesChart

【问题讨论】：

标签： reactjs typescript highcharts next.js sankey-diagram

【解决方案1】：

NextJS 两次运行您的代码：首先在服务器上，然后在客户端的浏览器中。此错误发生在之前的情况中，即 Sankey 尝试在服务器上初始化自身但失败，因为它需要一个真正的浏览器。

要解决此问题，您可以使用以下检查有条件地仅在浏览器中添加模块：

if (typeof Highcharts === "object") {
  addSankeyModule(Highcharts)
}

【讨论】：