添加Babel后Vite/React应用崩溃，求故障原因与解决办法
2026-7-10
问题原因与修复方案
原因
该错误是由于手动安装的@babel/core与Vite内置的Babel依赖版本冲突导致的。Vite的vite:react-babel插件已自带适配的Babel相关依赖，手动安装的外部版本会干扰内置逻辑，引发File属性重复定义的冲突。
修复步骤
- 卸载手动安装的Babel依赖：
npm uninstall --save-dev @babel/core @babel/cli @babel/preset-env - 清理项目依赖残留：
- 删除
node_modules目录：Windows执行rd /s /q node_modules，Linux/macOS执行rm -r node_modules - 删除
package-lock.json文件：del package-lock.json - 强制清理npm缓存：
npm cache clean --force
- 删除
- 重新安装项目依赖：
npm install - 检查并清理
vite.config.js中的自定义Babel配置：如果之前手动添加过Babel相关配置项，需移除，Vite的React插件会自动处理默认的Babel编译逻辑。
补充说明：Vite React模板默认已集成适配的Babel支持，无需手动安装@babel/core等基础依赖。若有特殊自定义Babel需求，需确保安装的Babel版本与@vitejs/plugin-react要求的版本完全兼容。
内容的提问来源于stack exchange，提问作者Tmk Plzv
相关产品推荐
相关产品推荐
