使用Vite创建React项目运行npm run dev时遇Cannot redefine property: File错误如何解决？

问题场景 #

用Vite创建React新项目，执行npm run dev启动服务后，在浏览器打开项目时出现报错。

错误信息 #

[plugin:vite:react-babel] Cannot redefine property: File
C:/Users/kaana/Desktop/tempfolio/tempfolio-react/src/main.jsx
at Function.defineProperty ()
at Object. (C:\Users\kaana\Desktop\tempfolio\tempfolio-react\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. (C:\Users\kaana\Desktop\tempfolio\tempfolio-react\node_modules@babel\core\lib\config\helpers\config-api.js:16:14)
at Module._compile (node:internal/modules/cjs/loader:1241:14)

main.jsx代码 #

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

已尝试操作 #

• 更新npm包、Babel和Vite
• 卸载重装相关依赖

解决步骤 #

• 彻底清理缓存并重装依赖

  1. 删除项目根目录下的node_modules文件夹
  2. 删除package-lock.json文件（若用yarn则删除yarn.lock）
  3. 执行npm cache clean --force清空npm缓存
  4. 重新执行npm install安装依赖

• 切换Node.js到LTS版本
  该错误可能源于Node.js版本兼容性问题，建议切换到官方推荐的LTS版本（如18.x或20.x）：

  • 用nvm（Node版本管理器）执行nvm install --lts安装最新LTS版本
  • 执行nvm use --lts切换版本后，重新启动项目

• 移除自定义Babel配置
  如果项目中有.babelrc或babel.config.js文件，直接删除即可——Vite的React模板默认无需额外Babel配置，自定义配置容易引发冲突。

• 卸载全局依赖避免干扰
  全局安装的Babel或Vite可能和项目本地依赖冲突：

  1. 执行npm list -g @babel/core vite查看全局依赖版本
  2. 若存在，执行npm uninstall -g @babel/core vite卸载全局版本
  3. 重新执行npm install安装项目本地依赖

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