执行npm run build后React开发者工具仍显示开发构建

问题排查 #

你已经确认process.env.NODE_ENV为production，且更换浏览器、清除缓存后问题依旧，那核心原因大概率是构建产物里的React核心包版本不对——React开发者工具是根据引入的react.production.min.js（生产版）或react.development.js（开发版）来判断模式的，并非只依赖环境变量。

先做个快速验证：

• 打开build/static/js下的主JS文件（比如main.xxx.js），搜索关键词react.development。如果能搜到，说明构建时没有正确替换为生产版React。

解决步骤 #

1. 清理依赖缓存，重新构建 #

依赖缓存异常可能导致构建逻辑出错，执行以下操作：

• 删除node_modules文件夹和package-lock.json文件
• 重新安装依赖：npm install
• 重新执行构建：npm run build
• 用serve -s build启动后再次验证

2. 强制指定生产环境变量构建 #

尝试显式指定环境变量，避免react-scripts自动判断偏差：

• Linux/macOS终端：

  NODE_ENV=production npm run build
  

• Windows命令提示符：

  set NODE_ENV=production && npm run build
  

• Windows PowerShell：

  $env:NODE_ENV="production"; npm run build
  

3. 检查第三方依赖是否引入开发版React #

部分第三方包可能在生产环境下意外引入开发版React，通过以下命令查看依赖树：

npm ls react

如果发现有依赖嵌套安装了独立的React（而非使用项目根目录的React），建议更新该依赖到最新版本，或查看其文档确认生产环境配置要求。比如你用到的@zegocloud/zego-uikit-prebuilt这类工具包，可能存在打包配置问题，优先尝试版本升级。

4. 手动验证React构建版本 #

如果以上步骤无效，可在浏览器控制台直接验证：

• 执行React.version查看版本号
• 执行React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDebugCurrentFrame——该属性仅存在于开发版React，生产版不会暴露此内部变量。

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