React服务端渲染报错：Reference error: window is not defined

这个错误在React服务端渲染（SSR）场景里简直是高频坑——毕竟Node.js环境压根没有浏览器的window对象嘛！咱们一步步拆解解决：

• 先定位代码里的直接访问
  先扫一遍你的组件和业务代码，有没有在组件初始化阶段（比如类组件的constructor、函数组件的顶层代码）直接写window.xxx的情况？比如这种错误写法：

  // 错误：组件顶层直接访问window
  const screenWidth = window.innerWidth;
  function Header() {
    return <div>当前宽度：{screenWidth}</div>;
  }
  

  修正方案：把这类依赖浏览器环境的逻辑，放到仅客户端执行的生命周期里。函数组件用useEffect（SSR时不会执行），类组件用componentDidMount：

  // 正确：延迟到客户端再获取window属性
  function Header() {
    const [screenWidth, setScreenWidth] = useState(0);
    
    useEffect(() => {
      setScreenWidth(window.innerWidth);
    }, []);
    
    return <div>当前宽度：{screenWidth}</div>;
  }
  

• 处理第三方库的window依赖
  很多第三方UI组件、图表库会在初始化时就访问window，这在SSR环境里直接触发报错。试试这几个办法：

  1. 动态导入依赖：用import()动态加载库，确保只在客户端执行：

     useEffect(() => {
       import('依赖window的第三方库').then(module => {
         // 在这里使用库
       });
     }, []);
     

  2. 环境判断加载：在Node环境中跳过导入，或者用require配合判断：

     let ThirdPartyLib;
     if (typeof window !== 'undefined') {
       ThirdPartyLib = require('依赖window的第三方库');
     }
     

  3. Webpack配置mock：如果用Webpack打包服务端代码，在配置里添加node选项来模拟window：

     // webpack.server.js
     module.exports = {
       // ...其他配置项
       node: {
         window: true,
         global: true,
         // 也可以精准模拟需要的属性
         // window: {
         //   innerWidth: 1200,
         //   location: { href: 'http://localhost:3000' }
         // }
       }
     };
     

• 用工具mock浏览器环境
  可以用专门的包在服务端模拟浏览器的window、document等对象，比如mock-browser：

  1. 先安装依赖：

     npm install mock-browser --save-dev
     

  2. 在服务端入口文件的最顶部添加模拟代码：

     const { MockBrowser } = require('mock-browser');
     const mockBrowser = new MockBrowser();
     global.window = mockBrowser.getWindow();
     global.document = mockBrowser.getDocument();
     global.navigator = mockBrowser.getNavigator();
     

• 服务端渲染时的条件渲染
  如果某些组件完全依赖浏览器环境，没法修改，那就在服务端渲染时直接跳过它们，等客户端hydrate的时候再渲染：

  function App() {
    return (
      <div className="app-container">
        {/* 服务端渲染时不加载依赖window的组件 */}
        {typeof window !== 'undefined' && <ChartComponent />}
      </div>
    );
  }
  

要是以上方法都试过还没解决，建议把报错的具体代码片段贴出来，这样能更快定位问题！

内容的提问来源于stack exchange，提问作者Andrew Pope