VSCode中运行npm start出现Material UI模块解析失败报错如何解决

安全阿岳

2026-9-25

报错原因

该报错为项目Webpack配置默认不对node_modules下的依赖做语法转译导致，你近期使用的Material UI版本使用了未被当前项目转译规则兼容的ES6+新语法（如可选链、空值合并运算符等），所以解析时抛出了Unexpected token异常。

方案1：锁回之前正常运行的Material UI版本
打开项目package.json文件，将@mui/material、@mui/system等相关MUI依赖的版本号替换为之前项目正常运行的版本号，删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件后，重新执行npm install安装依赖后启动项目即可。
方案2：调整Webpack的babel-loader规则，将MUI相关包纳入转译范围
找到项目的Webpack配置文件（webpack.config.js，若使用未eject的create-react-app项目可通过craco、customize-cra等工具覆盖配置），修改babel-loader的排除规则，示例配置如下：
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // 排除node_modules中除@mui开头的包之外的所有依赖
        exclude: /node_modules\/(?!@mui)/,
        loader: 'babel-loader'
      }
    ]
  }
}
```
方案3：补全Babel转译插件
安装常用新语法转译插件：
```
npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev
```
在项目的babel.config.js或.babelrc文件的plugins数组中添加上述插件：
```
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}
```
若使用@babel/preset-env，建议配置useBuiltIns: 'usage'并安装core-js@3兜底兼容更多语法。