部署后React报错#130：About页面空白，本地正常（Vite环境）

问题详情 #

本地localhost环境下网站运行完全正常，但部署上线后，仅点击About页面时会出现页面空白，控制台抛出Uncaught Error: Minified React error #130；其余4个页面均可正常访问。当前使用Vite作为构建工具，配置代码如下：

export default defineConfig({
  plugins: [react()],
  mode: "development",
  build: {
    minify: false,
  }
});

排查与解决思路 #

React错误#130的本质是渲染了无效的React元素（比如返回了undefined、null、普通对象而非合法的React组件/JSX），结合本地正常、部署异常的差异，可从以下几点排查：

• 检查About组件的导出逻辑：确认组件是否正确导出。比如如果路由中使用import About from './About'，但组件里只写了export function About()（无默认导出），本地开发可能兼容，但生产打包后会导致导入的是undefined，进而触发报错。
• 排查动态组件/异步导入：如果About页面使用了React.lazy或Vite动态导入，确保外层用<Suspense>包裹了加载状态。本地环境资源加载快可能不会暴露问题，部署后网络延迟可能触发加载失败，导致组件无法正常渲染。
• 调整Vite的mode配置：当前配置强制mode: "development"，生产打包时可能保留了开发环境的逻辑，导致兼容性问题。建议改为根据环境自动判断：

  mode: process.env.NODE_ENV || "development",
  

  或者打包时通过命令指定mode=production（比如vite build --mode production）。
• 检查浏览器环境API的使用：如果About组件中直接在顶层（或useEffect外）调用了window、document等浏览器专属API，打包后可能在组件初始化阶段就报错（部分部署环境可能有预渲染逻辑）。需将这类调用移至useEffect或确保仅在浏览器环境执行。
• 查看打包后的代码：因为已经关闭了minify，可直接查看dist目录中About页面相关的打包文件，定位是否存在组件返回非React元素的情况（比如某个子组件渲染时返回了undefined）。
• 核对路由配置：确认About页面的路由路径、组件引用是否正确，避免因路由匹配错误导致组件未正确挂载。

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