使用Vite+React时遇Cannot redefine property: File错误求助

报错详情 #

➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
Cannot redefine property: File
10:07:17 PM [vite] Internal server error: Cannot redefine property: File
  Plugin: vite:react-babel
  File: C:/Users/musta/Desktop/idurar-erp-crm-master/frontend/src/main.jsx
      at Function.defineProperty (<anonymous>)
      at Object.<anonymous> (C:\Users\musta\Desktop\idurar-erp-crm-master\frontend\node_modules\@babel\core\lib\index.js:7:8)
      at Module._compile (node:internal/modules/cjs/loader:1241:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
      at Module.load (node:internal/modules/cjs/loader:1091:32)
      at Module._load (node:internal/modules/cjs/loader:938:12)
      at Module.require (node:internal/modules/cjs/loader:1115:19)
      at require (node:internal/modules/helpers:130:18)
      at Object.<anonymous> (C:\Users\musta\Desktop\idurar-erp-crm-master\frontend\node_modules\@babel\core\lib\config\helpers\config-api.js:16:14)
      at Module._compile (node:internal/modules/cjs/loader:1241:14)

解决方案 #

• 清除依赖缓存并重装

  1. 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件
  2. 执行命令清理NPM缓存：npm cache clean --force
  3. 重新安装依赖：npm install

• 锁定@babel/core稳定版本
  该报错多因@babel/core版本不兼容导致，在package.json中指定一个经过验证的稳定版本，例如：

  "dependencies": {
    // 其他依赖...
    "@babel/core": "^7.22.0"
  }
  

  保存后再次执行npm install

• 排查依赖冲突
  执行npm ls @babel/core查看项目中@babel/core的依赖树，检查是否存在多版本冲突。如果有，可通过npm dedupe自动合并重复依赖，或手动在package.json的resolutions字段强制指定版本：

  "resolutions": {
    "@babel/core": "^7.22.0"
  }
  

• 调整Vite的React插件配置
  在vite.config.js中修改React插件的Babel配置，跳过预检查或禁用冲突插件：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react({
      babel: {
        skipPreflightCheck: true,
        // 按需禁用可能引发冲突的插件
        plugins: []
      }
    })]
  })
  

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