Vite构建React生产环境报错：Cannot assign to read only property '_status'

1. 排查lazyLoad函数的错误写法 #

生产环境下React会对React.lazy返回的组件对象做冻结处理（Object.freeze），如果你的lazyLoad函数直接修改了该对象的内部属性（比如_status），就会触发只读属性赋值错误。比如这种错误写法要立刻改掉：

const lazyLoad = (path) => {
  const Component = React.lazy(() => import(`../pages/${path}`));
  // 错误：直接修改lazy组件的内部属性
  Component._status = 'loaded';
  return Component;
};

2. 正确封装动态路由组件 #

通过高阶组件或包裹新组件的方式实现动态加载，不要直接修改React.lazy返回的实例：

import React, { lazy, Suspense } from 'react';

const lazyLoad = (path) => {
  const LazyComponent = lazy(() => import(`../pages/${path}`));
  // 返回新组件而非直接修改原lazy组件
  return (props) => (
    <Suspense fallback={<div>加载中...</div>}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

3. 调整Vite生产构建优化配置 #

如果是代码压缩导致的对象冻结，可在vite.config.js中调整terser配置，避免过度优化：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        // 禁用可能冻结组件对象的优化项
        keep_fargs: true,
        keep_infinity: true,
        passes: 3
      }
    }
  }
});

4. 锁定兼容的依赖版本 #

确保核心依赖版本匹配，避免因版本不兼容触发隐性问题：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.0",
    "vite-plugin-pwa": "^0.14.0"
  }
}

5. 给动态加载添加错误捕获 #

针对后端返回的路由路径，增加加载失败的兜底处理，避免因路径错误引发连锁问题：

const lazyLoad = (path) => {
  const LazyComponent = lazy(() => 
    import(`../pages/${path}`).catch(err => {
      console.error('组件加载失败:', path, err);
      // 加载失败时返回404页面
      return import('../pages/NotFound');
    })
  );
  return (props) => (
    <Suspense fallback={<div>加载中...</div>}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

6. 用调试模式定位问题 #

如果修改后仍报错，可通过Vite的调试构建命令查看具体错误位置：

vite build --debug

根据日志输出定位到具体触发赋值的代码，进一步排查。

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