部署React应用至GitHub Pages时生产环境出现Minified React error #130

这个压缩后的错误#130，实际是说你在渲染时输出了纯对象，而非React能识别的有效渲染元素（比如组件、字符串、null等）。开发环境正常是因为生产环境压缩了错误信息，且开发模式的测试场景可能没覆盖到出错分支。

排查与修复步骤 #

• 先定位出错组件

  • 本地模拟生产环境：执行npm run build构建产物，用npx serve build启动本地服务，此时能看到完整错误栈，直接定位到出问题的组件。
  • 全局检查所有组件的return语句，看是否存在直接返回纯对象的情况，比如return {user: 'xxx'}，或者在JSX里直接插入未处理的对象，比如<div>{apiResponseData}</div>（这里apiResponseData是未解构的纯对象）。

• 常见出错场景修复

  • API数据处理：如果渲染接口返回的数据，要确保只取具体字段，比如用{user.name}而非{user}；加载状态下返回null或加载组件，别直接返回未初始化的空对象。
  • 条件渲染分支：检查所有if/else或三元表达式的渲染结果，确保每个分支都返回有效React元素，比如把if (empty) return {}改成if (empty) return null。
  • 自定义组件返回值：确认所有组件的返回值都是JSX元素、字符串、数字、null、undefined或布尔值，不能返回普通对象。

• GitHub Pages特有配置检查

  • 路由配置：如果用React Router，必须用HashRouter替代BrowserRouter，因为GitHub Pages不支持前端路由的history模式；或者在BrowserRouter里设置正确的basename属性，值为你的仓库名。
  • 构建配置：确保package.json里的homepage字段设置正确，比如"homepage": "https://yourusername.github.io/your-repo-name"，避免构建后路径错误引发的渲染异常。

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