Vite项目中SWC与MUI兼容问题及Babel报错求助

针对你遇到的@babel/runtime/helpers/esm/extends、objectWithoutPropertiesLoose等模块无法解析的问题，试试下面几个方案：

1. 安装缺失的Babel runtime依赖 #

先确保项目里安装了必要的Babel runtime包，执行：

npm install @babel/runtime @babel/plugin-transform-runtime --save-dev

如果用pnpm或yarn，对应替换命令即可。

2. 配置Vite使用Babel替代SWC #

如果确实是SWC与MUI的兼容性问题，在vite.config.js中调整React插件的配置，强制使用Babel并启用runtime转换：

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

export default defineConfig({
  plugins: [
    react({
      // 禁用SWC，改用Babel
      swc: false,
      babel: {
        plugins: ['@babel/plugin-transform-runtime'],
      },
    }),
  ],
});

这个配置会让Babel自动处理MUI依赖中用到的runtime辅助函数，避免路径解析错误。

3. 对齐Babel相关依赖版本 #

检查package.json中@babel/runtime和@babel/plugin-transform-runtime的版本是否一致，确保都使用7.x系列的稳定版，版本不匹配也可能导致解析问题。

4. 清除缓存并重启服务 #

做完上述配置后，清理项目缓存并重新安装依赖：

rm -rf node_modules .vite
npm install
npm run dev

大部分情况下，通过切换回Babel并配置runtime插件就能解决这类解析错误，因为SWC目前对某些Babel特定的ESM路径处理还不完善。

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