Next.js集成Highcharts在Vercel构建报错：ReferenceError: self is not defined

问题原因 #

Highcharts初始化时会访问浏览器环境的self对象，但Next.js的服务端渲染（SSR）/静态生成（SSG）阶段不存在该对象，导致构建报错。

具体解决方案 #

方案1：动态导入并禁用SSR #

通过Next.js的动态导入功能，让Highcharts相关代码仅在客户端执行，避免服务端渲染时触发错误：

import dynamic from 'next/dynamic';

// 动态导入自定义的Highcharts组件，禁用服务端渲染
const HighchartsChart = dynamic(() => import('./YourHighchartsComponent'), {
  ssr: false,
  loading: () => <div>图表加载中...</div>
});

export default function ChartPage() {
  return <HighchartsChart />;
}

如果是直接在组件内使用Highcharts库，也可以在客户端生命周期钩子中动态导入：

import { useEffect, useState } from 'react';

export default function ChartPage() {
  const [chartInstance, setChartInstance] = useState(null);

  useEffect(() => {
    // 仅在客户端环境加载Highcharts
    import('highcharts').then(Highcharts => {
      const chart = Highcharts.chart('chart-container', {
        title: { text: '股票/加密货币走势' },
        series: [{ data: [23, 45, 32, 56, 41] }]
        // 其他图表配置
      });
      setChartInstance(chart);
    });

    // 组件卸载时销毁图表，避免内存泄漏
    return () => {
      if (chartInstance) chartInstance.destroy();
    };
  }, []);

  return <div id="chart-container" style={{ width: '100%', height: '400px' }}></div>;
}

方案2：配置webpack模拟浏览器环境 #

在next.config.js中添加webpack配置，为服务端构建阶段提供self对象的模拟：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 定义全局self变量指向window（服务端仅做模拟）
      config.plugins.push(
        new config.webpack.DefinePlugin({
          self: 'window'
        })
      );
    }
    return config;
  }
};

module.exports = nextConfig;

方案3：使用Highcharts官方React适配包 #

Highcharts官方提供了适配React的包，可更好地兼容Next.js：
首先安装依赖：

npm install highcharts-react-official

然后在组件中仅在客户端渲染图表：

import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import { useEffect, useState } from 'react';

export default function ChartPage() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const chartOptions = {
    title: { text: '资产价格走势' },
    xAxis: { type: 'datetime' },
    series: [{ name: '收盘价', data: [[1690000000000, 28000], [1690086400000, 28500]] }]
  };

  // 仅在客户端渲染图表组件
  return isClient ? (
    <HighchartsReact highcharts={Highcharts} options={chartOptions} />
  ) : (
    <div>加载中...</div>
  );
}

验证步骤 #

修改代码后，先在本地执行npm run build测试是否能正常构建，确认无报错后再部署到Vercel，即可解决问题。

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