Next.js执行build/export时出现chartjs-plugin-zoom的window未定义错误

问题原因 #

chartjs-plugin-zoom在初始化阶段直接访问了浏览器的window对象，但Next.js的build和export过程包含服务端渲染（SSR）步骤，服务端环境中不存在window，因此抛出错误。移除该插件导入后，代码不再触发window访问，构建自然恢复正常。

解决方案 #

核心思路是让chartjs-plugin-zoom仅在客户端环境加载、执行，以下是几种可行方法：

1. 用Next.js动态导入（禁用SSR）

将用到chartjs-plugin-zoom的组件通过next/dynamic动态导入，关闭服务端渲染：

import dynamic from 'next/dynamic';

// 替换为你实际的图表组件路径
const ChartWithZoom = dynamic(() => import('../components/YourChart'), {
  ssr: false,
});

// 页面中直接使用该组件即可
export default function StatsPage() {
  return <ChartWithZoom />;
}

2. 条件判断后导入插件

先判断当前环境是否为客户端（即window存在），再导入并使用插件：

import Chart from 'chart.js/auto';

let zoomPlugin;
// 仅在客户端加载插件
if (typeof window !== 'undefined') {
  zoomPlugin = require('chartjs-plugin-zoom').default;
}

export default function YourChart() {
  const initChart = () => {
    const ctx = document.getElementById('chart-container');
    new Chart(ctx, {
      type: 'line',
      data: {/* 你的图表数据 */},
      // 仅在插件存在时添加到配置
      plugins: zoomPlugin ? [zoomPlugin] : [],
      options: {
        plugins: {
          zoom: {
            pan: { enabled: true },
            zoom: { enabled: true }
          }
        }
      }
    });
  };

  return <canvas id="chart-container" onLoad={initChart}></canvas>;
}

3. 借助useEffect在客户端加载插件

利用React的useEffect钩子（仅在客户端执行）延迟加载插件：

import { useEffect, useState } from 'react';
import Chart from 'chart.js/auto';

export default function YourChart() {
  const [zoomPlugin, setZoomPlugin] = useState(null);

  // 客户端渲染完成后加载插件
  useEffect(() => {
    import('chartjs-plugin-zoom').then(module => {
      setZoomPlugin(module.default);
    });
  }, []);

  // 插件加载完成后初始化图表
  useEffect(() => {
    if (!zoomPlugin) return;

    const ctx = document.getElementById('chart-container');
    new Chart(ctx, {
      type: 'bar',
      data: {/* 你的图表数据 */},
      plugins: [zoomPlugin],
      options: {/* 图表与插件配置 */}
    });
  }, [zoomPlugin]);

  return <canvas id="chart-container"></canvas>;
}

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