使用Create React App集成MUI时编译失败问题求助

这个报错是因为MUI包中的语法未被create-react-app默认的webpack loader处理，大概率是版本不兼容导致的，以下是可行的解决步骤：

• 锁定兼容的MUI版本
  针对create-react-app v4及以下版本，安装适配的稳定版本：

  npm install @mui/material@^5.14.0 @emotion/react@^11.11.0 @emotion/styled@^11.11.0
  

  若使用create-react-app v5，确保node版本≥16，可直接安装最新MUI版本。

• 检查并升级Node.js版本
  运行node -v确认版本不低于14（MUI v5最低要求），版本过低则升级至16+的LTS版本。

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

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• （备选方案）扩展webpack配置支持新语法
  若上述方法无效，用react-app-rewired扩展配置：

  1. 安装依赖：

     npm install react-app-rewired customize-cra
     

  2. 项目根目录创建config-overrides.js，写入：

     const { override, addBabelPlugins } = require('customize-cra');
     
     module.exports = override(
       addBabelPlugins('@babel/plugin-proposal-optional-chaining'),
       addBabelPlugins('@babel/plugin-proposal-nullish-coalescing-operator')
     );
     

  3. 修改package.json的scripts：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

  4. 重启项目：npm start

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