Next.js中动态导入Highcharts组件失败，求解决方法

错误原因 #

你遇到的类型错误核心原因是：dynamic（比如Next.js的动态导入工具）是用来加载React组件的，它要求导入的模块默认导出是React组件类型，但Highcharts本身是一个纯JS图表库，导出的是API对象而非组件。

直接用dynamic(() => import('highcharts'))时，TypeScript会检测到返回值不匹配组件类型，抛出类型错误；用as any绕过检查后，Highcharts变量变成了dynamic生成的组件包装器，而非真实的Highcharts库实例，传给ReactHighcharts后无法正常初始化图表，导致组件不渲染。

正确解决方案 #

方案1：在组件内部动态加载Highcharts（推荐） #

利用React的useEffect异步加载Highcharts库，加载完成后再渲染ReactHighcharts组件：

import React, { useState, useEffect } from 'react';
import ReactHighcharts from "highcharts-react-official";

const TreeChart = ({ treeConfig }) => {
  const [highchartsLib, setHighchartsLib] = useState(null);

  useEffect(() => {
    // 异步加载Highcharts
    const loadHighcharts = async () => {
      const importedHighcharts = await import('highcharts');
      setHighchartsLib(importedHighcharts);
    };
    loadHighcharts();
  }, []);

  // 加载完成前显示占位内容
  if (!highchartsLib) {
    return <div>图表加载中...</div>;
  }

  return (
    <ReactHighcharts
      highcharts={highchartsLib}
      options={treeConfig}
    />
  );
};

export default TreeChart;

如果你的项目是Next.js，需要避免服务端渲染Highcharts（因为它依赖浏览器环境），可以再把这个组件用dynamic包装：

// 在父组件中导入
import dynamic from 'next/dynamic';

const TreeChart = dynamic(() => import('./TreeChart'), {
  ssr: false,
  loading: () => <div>图表加载中...</div>
});

方案2：一次性动态加载Highcharts和ReactHighcharts #

直接在dynamic中同时加载两个库，包装成可动态渲染的组件：

import dynamic from 'next/dynamic';

const DynamicTreeChart = dynamic(() => {
  return Promise.all([
    import('highcharts'),
    import('highcharts-react-official')
  ]).then(([highcharts, reactHighchartsModule]) => {
    const ReactHighcharts = reactHighchartsModule.default;
    // 返回一个接收options的组件
    return ({ options }) => (
      <ReactHighcharts highcharts={highcharts} options={options} />
    );
  });
}, {
  ssr: false,
  loading: () => <div>图表加载中...</div>
});

// 使用时
<DynamicTreeChart options={treeConfig} />

关键注意点 #

• Highcharts依赖浏览器DOM环境，所以在服务端渲染框架（如Next.js）中必须关闭该组件的SSR（设置ssr: false）。
• 动态加载时要处理加载状态，避免页面出现空白或错误。

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