ReactJS集成Fly软件报错：ReferenceError: window is not defined

嘿，我之前也碰到过类似的问题，结合你的代码和场景来看，这个错误的核心原因其实很明确——Fly默认会启用服务端渲染（SSR）特性，而服务端的Node.js环境里是没有浏览器专属的window对象的，刷新页面时Fly会在服务端尝试预渲染你的React应用，这时候执行到依赖浏览器环境的代码就会抛出这个错误。

下面给你拆解问题和对应的解决方向：

问题根源分析 #

1. Fly的服务端渲染逻辑：当你运行fly server时，它不仅会启动静态服务，还会尝试在服务端预渲染你的React组件，而服务端环境没有window、document这些浏览器特有的全局对象。
2. 你的代码没有做环境区分：ReactDOM.render是完全基于浏览器环境的API，直接写在index.js里会被服务端代码执行到，自然会报错。
3. Webpack配置只适配客户端：当前的Webpack配置是为浏览器打包的，没有考虑服务端渲染的兼容性（比如style-loader在服务端无法正常工作）。

具体解决步骤 #

1. 先给React渲染代码加环境判断（快速修复） #

修改你的index.js，只在浏览器环境下执行ReactDOM.render：

import React from 'react';
import ReactDOM from 'react-dom';

// 只有在浏览器环境（存在window对象）时才执行渲染逻辑
if (typeof window !== 'undefined') {
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );
}

这样服务端执行这段代码时会跳过渲染逻辑，避免触发window未定义的错误，浏览器端则正常渲染。

2. 调整Webpack配置适配Fly的SSR（进阶方案） #

如果需要保留Fly的服务端渲染能力，你需要拆分Webpack配置为客户端和服务端两个版本：

• 服务端配置：设置target: 'node'，让Webpack打包出Node.js环境可执行的代码；把style-loader替换为css-loader/locals（服务端无法注入样式到DOM）。
• 客户端配置：保留你当前的配置即可，专门用于浏览器环境的打包。

示例服务端Webpack配置片段：

module.exports = {
  target: 'node', // 关键：告诉Webpack打包Node.js环境的代码
  entry: "./src/server.js", // 新增服务端入口文件
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react']} },
      { test: /\.css$/, use: [ 'css-loader/locals' ] } // 替换style-loader
    ]
  },
  // 其余配置按需调整...
};

3. 可选：禁用Fly的服务端渲染（如果不需要） #

如果你暂时不需要服务端渲染的功能，可以查看Fly的官方配置文档，找到关闭服务端预渲染的选项，让应用完全在浏览器端运行，这样就不会碰到服务端环境的限制了。

新手友好提示 #

因为你刚接触React和Webpack，建议先花点时间理解**客户端渲染（CSR）和服务端渲染（SSR）**的核心区别，这能帮你更快理清这类跨环境问题的本质。修改代码后记得重新运行fly server，确保新的打包代码生效哦。

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