执行npm run build生成静态页面时出现window未定义错误

错误日志 #

ReferenceError: window is not defined
at 99869 (/Users/admin/Desktop/raff/raff-frontend/.next/server/chunks/7450.js:1:2175763)
at t (/Users/admin/Desktop/raff/raff-frontend/.next/server/webpack-runtime.js:1:143)
at 97450 (/Users/admin/Desktop/raff/raff-frontend/.next/server/chunks/7450.js:1:2619858)
at t (/Users/admin/Desktop/raff/raff-frontend/.next/server/webpack-runtime.js:1:143)
at 92540 (/Users/admin/Desktop/raff/raff-frontend/.next/server/chunks/5644.js:1:61698)
at t (/Users/admin/Desktop/raff/raff-frontend/.next/server/webpack-runtime.js:1:143)
at 49814 (/Users/admin/Desktop/raff/raff-frontend/.next/server/chunks/5644.js:1:10198)
at Object.t [as require] (/Users/admin/Desktop/raff/raff-frontend/.next/server/webpack-runtime.js:1:143)
at require (/Users/admin/Desktop/raff/raff-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18490)
at I (/Users/admin/Desktop/raff/raff-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
✓ Generating static pages (33/33)

出错页面路径 #

• /login
• /login2
• /login3
• /agreements
• /calendar
• /chat
• /home-empty-states
• /integrations
• /
• /settings/company-settings
• /settings/general-settings
• /settings/integrations
• /settings/notification-settings
• /settings/privacy-security
• /settings/profile-settings
• /teams

解决方法 #

这个错误是因为Next.js在服务端渲染/静态生成阶段访问了仅浏览器环境存在的window对象，以下是具体修复方式：

1. 直接判断window是否存在 #

修改代码中直接访问window的逻辑，先判断是否处于浏览器环境：

// 错误写法
const screenWidth = window.innerWidth;

// 正确写法
let screenWidth = 0;
if (typeof window !== 'undefined') {
  screenWidth = window.innerWidth;
}

2. 用useEffect延迟执行客户端逻辑 #

在React组件中，使用useEffect确保代码仅在客户端渲染时执行：

import { useEffect } from 'react';

function LayoutComponent() {
  useEffect(() => {
    // 这里可安全访问window
    document.title = `当前窗口高度: ${window.innerHeight}`;
  }, []);

  return <div>页面内容</div>;
}

export default LayoutComponent;

3. 标记组件为客户端组件（App Router） #

如果使用Next.js App Router，在依赖window的组件顶部添加'use client'指令，强制组件在客户端渲染：

'use client';

import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    // 从localStorage读取主题，依赖window对象
    const savedTheme = window.localStorage.getItem('theme');
    if (savedTheme) setTheme(savedTheme);
  }, []);

  return <div>当前主题: {theme}</div>;
}

4. 动态导入第三方依赖并禁用SSR #

如果错误由第三方库导致，用Next.js的dynamic导入并关闭SSR：

import dynamic from 'next/dynamic';

// 禁用SSR加载依赖window的第三方组件
const ChartComponent = dynamic(() => import('react-chartjs-2'), {
  ssr: false,
  loading: () => <p>图表加载中...</p>
});

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