React StrictMode下react-highcharts报forExport未定义类型错误求助

这不是你的操作遗漏，大概率是 react-highcharts 与 React StrictMode 生命周期不兼容的 bug。

问题原因 #

React StrictMode 在开发环境下会重复执行组件的挂载/卸载流程（比如两次调用 useEffect 的清理函数），目的是检测未被正确处理的副作用。而 react-highcharts 的内部销毁逻辑没有考虑这种场景：第一次卸载已经销毁了图表实例，第二次执行销毁时，chart 对象已经变成 undefined，此时访问 chart.renderer.forExport 就会抛出类型错误。

临时修复（不用关闭 StrictMode） #

你可以手动接管图表实例的销毁逻辑，避免重复销毁不存在的实例：

• 用 useRef 保存图表实例引用
• 在卸载清理函数中先判断实例是否存在，再执行销毁

示例代码：

import React, { useEffect, useRef } from 'react';
import ReactHighcharts from 'react-highcharts';

const MyChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = chartRef.current?.getChart();
    return () => {
      // 仅当实例存在且未被销毁时执行销毁
      if (chart && !chart.isDestroyed) {
        chart.destroy();
      }
    };
  }, []);

  return <ReactHighcharts ref={chartRef} options={/* 你的图表配置 */} />;
};

export default MyChart;

长期处理建议 #

1. 升级依赖版本：检查 react-highcharts 和 Highcharts 的最新版本，官方可能已经修复了这个 StrictMode 兼容问题
2. 切换到官方 React 封装：react-highcharts 并非 Highcharts 官方维护的库，官方提供的 React 封装会更适配 React 生命周期和 StrictMode，稳定性更好
3. 提交 bug 反馈：如果升级后问题仍存在，可以在 react-highcharts 的代码仓库提交 issue，附上你的环境信息和复现步骤，帮助开发者修复问题

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