Next.js集成AnyChart构建报错：Cannot read properties of undefined (reading 'document')

这个问题的核心原因是AnyChart是依赖浏览器环境的客户端库，Next.js在SSR（服务器端渲染）阶段会尝试执行组件代码，此时没有浏览器的document对象，导致调用AnyChart时触发报错。以下是几种可行的解决办法：

1. 动态导入组件并禁用SSR #

使用Next.js的dynamic导入方法，明确指定组件只在客户端渲染，避免SSR过程中执行AnyChart的初始化代码。

页面文件示例（如app/page.js）： #

import dynamic from 'next/dynamic';

// 动态导入热力图组件，禁用SSR
const HeatmapChart = dynamic(() => import('../components/HeatmapChart'), {
  ssr: false,
  loading: () => <p>加载图表中...</p>
});

export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <HeatmapChart />
    </main>
  );
}

热力图组件示例（components/HeatmapChart.jsx）： #

import React, { useEffect, useRef } from 'react';
import anychart from 'anychart';

export default function HeatmapChart() {
  const chartContainer = useRef(null);

  useEffect(() => {
    if (!chartContainer.current) return;

    // 准备热力图数据
    const heatmapData = [
      ['Mon', 'Jan', 10],
      ['Mon', 'Feb', 15],
      ['Tue', 'Jan', 20],
      ['Tue', 'Feb', 25],
      // 更多数据项...
    ];

    // 初始化并渲染热力图
    const chart = anychart.heatMap(heatmapData);
    chart.title('月度活跃度热力图');
    chart.container(chartContainer.current);
    chart.draw();

    // 组件卸载时清理图表实例
    return () => chart.dispose();
  }, []);

  return <div ref={chartContainer} style={{ width: '100%', height: '500px' }} />;
}

2. 确保AnyChart仅在浏览器环境初始化 #

如果不想用动态导入，可以在组件中通过typeof window !== 'undefined'判断环境，仅在客户端执行AnyChart的初始化逻辑：

import React, { useEffect, useRef } from 'react';

export default function HeatmapChart() {
  const chartContainer = useRef(null);

  useEffect(() => {
    // 跳过服务器端渲染阶段
    if (typeof window === 'undefined') return;

    // 动态导入AnyChart（可选，进一步避免SSR加载）
    import('anychart').then(({ default: anychart }) => {
      const heatmapData = [/* 数据项 */];
      const chart = anychart.heatMap(heatmapData);
      chart.container(chartContainer.current);
      chart.draw();

      return () => chart.dispose();
    });
  }, []);

  return <div ref={chartContainer} style={{ width: '100%', height: '500px' }} />;
}

3. 转译AnyChart依赖（可选） #

如果上述方法仍有问题，可能是AnyChart的模块格式与Next.js不兼容，可在next.config.js中配置转译该包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['anychart'],
};

module.exports = nextConfig;

验证步骤 #

1. 执行npm run build重新构建项目，确认报错消失
2. 构建完成后启动生产环境服务：npm start，检查热力图是否正常渲染

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