HighCharts Sankey + NextJS: TypeError: Cannot read property 'Core/Series/Point.js' of undefined

Question

我正在尝试渲染 HighCharts Sankey chart using HighCharts React and NextJS。我已经按照 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

Answer 1

NextJS 运行您的代码两次：第一次在服务器上，然后在客户端的浏览器中。这个错误发生在前面的情况中，Sankey 试图在服务器上初始化自己但失败了，因为它需要一个真正的浏览器。

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

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

HighCharts Sankey + NextJS: TypeError: Cannot read property 'Core/Series/Point.js' of undefined

HighCharts Sankey + NextJS: TypeError: Cannot read property 'Core/Series/Point.js' of undefined

highcharts

typescript

reactjs

sankey-diagram

next.js