如何使用Material UI默认组件并解决运行时报错问题

错误成因 #

你遇到的模块解析报错与MUI组件代码本身无关，是项目构建环境无法支持MUI v5+使用的现代ES语法特性导致的，核心问题有两点：

• 项目依赖的Webpack、Babel版本过低，无法解析MUI依赖中使用的可选链、空值合并等ES2020+语法
• 构建配置默认仅转译项目src目录下的代码，没有将@mui相关的依赖包纳入babel-loader的转译范围，无法处理node_modules中MUI的代码

修复步骤 #

• 首先确认依赖版本适配：检查项目是否满足MUI v5的最低运行要求：React >= 17.0.0，ReactDOM >= 17.0.0，Babel >=7.13.0，若版本过低先升级对应依赖。
• 调整Webpack转译规则：在Webpack配置中修改babel-loader的匹配规则，将@mui相关包加入转译范围，参考配置如下：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules\/(?!(@mui)\/)/,
      use: ['babel-loader']
    }
  ]
}

上述配置的作用是排除node_modules下除@mui之外的所有包，让babel专门转译MUI的源码。

• 检查Babel预设配置：确保你的.babelrc或babel.config.json中已经配置了@babel/preset-env和@babel/preset-react，同时@babel/preset-env的targets配置覆盖你需要兼容的浏览器范围。
• 修复组件代码的空属性问题：你自行调整的代码中CardMedia的component和image属性留空，会导致组件渲染异常，补全属性即可，例如按照官方示例设置component="img"，image填写实际的图片资源地址。
• 清理缓存重启项目：配置修改完成后删除node_modules文件夹和package-lock.json/yarn.lock文件，重新安装依赖后启动项目即可。

内容的提问来源于stack exchange，提问作者C-Bizz