当 vite build 在生产环境中反应时，无法分配给对象“#<Object>”的只读属性“_status”

Question

我尝试通过 vite 构建 React PWA。在开发中一切正常，但在生产模式上显示标题错误。

我猜测react，react-router-dom，vite的版本是否不兼容。这是我的package.json

{
  "name": "vite-react-ts-tpl",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.3",
    "antd": "^5.16.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.23.0"
  },
  "devDependencies": {
    "@types/node": "^20.12.5",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.5.0",
    "@typescript-eslint/parser": "^7.5.0",
    "@vitejs/plugin-react": "^4.2.1",
    "axios": "^1.6.8",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "prettier": "^3.2.5",
    "stylelint": "^16.3.1",
    "stylelint-config-standard": "^36.0.0",
    "typescript": "^5.2.2",
    "vite": "^5.2.10",
    "vite-plugin-dynamic-import": "^1.5.0"
  }
}

这是我的 vite 配置文件。

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

export default defineConfig({
    plugins: [react(), dynamicImport()],
    resolve: {
        /*配置别名 */
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    base: '/',
    server: {
        port: 2024,
    },
    build: {
        dynamicImportVarsOptions: {},
    },
    esbuild: {
        pure: ['console.log', 'debugger'],
    },
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    hack: `true; @import (reference) "${path.resolve('src/assets/css/common.less')}";`,
                },
                javascriptEnabled: true,
            },
        },
    },
});

我尝试解决这个问题一段时间。我发现这段代码导致了错误。

export const lazyLoad = (path: string) => {
    const Module = lazy(() => import(`../${path}`));

    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Module />
        </Suspense>
    );
};

我使用 React.lazy 动态加载 React 路由器。后端返回对象包括路径、标题等变量。

请帮助孩子！这个问题困扰我很久了

解决这个问题。

Answer 1

我确信 React.lazy 和 Suspense 本身不会导致此类问题，但动态导入的模块可能会产生副作用或需要在开发模式下不可见的特殊处理。

请您确认一下在本地机器上执行tsc和vite build命令时是否仍然出现错误？

如果确实如此，隔离问题的一种方法是在 Vite 生产版本中暂时禁用缩小功能。

Minification 和 Tree Shaking 一样，是 Vite 生产优化过程的一部分，有时会引入开发过程中不存在的行为。我建议这些步骤旨在帮助诊断问题。

您检查过动态导入的模块是否有任何属性发生变化？

另外，由于我注意到您正在使用 Redux，请确保状态不会直接更改。直接状态突变是常见的错误来源，因为 Redux 期望状态是不可变的。