React项目引入Material UI后出现Module parse failed: Unexpected token错误求助

看起来这个错误是因为你的项目没有正确转译@material-ui/core的代码导致的——虽然你用了babel-loader，但Create React App（你用的react-scripts@4.0.1）默认不会转译node_modules目录下的依赖包，而@material-ui/core的某些版本代码里包含了你的Babel配置不支持的语法，就会出现这种解析失败的错误。

我给你几个逐步排查的解决方案，从最简单的开始：

方案1：清除缓存并重新安装依赖 #

有时候是缓存了错误的编译结果，先彻底清理后重新安装：

1. 停止正在运行的项目
2. 删除node_modules文件夹和package-lock.json（如果你用yarn的话是yarn.lock）
3. 执行安装命令：

npm install

4. 重新启动项目：

npm start

方案2：升级Material UI版本 #

你当前用的@material-ui/core@4.11.0可能存在一些语法兼容问题，尝试升级到4.x的最新稳定版本：

npm install @material-ui/core@latest @material-ui/icons@latest

升级完成后重启项目试试。

方案3：配置转译Material UI依赖包 #

如果上面的方法都不行，就需要强制让Babel转译@material-ui/core的代码。因为Create React App默认不允许修改配置，我们可以用react-app-rewired来实现，不需要eject：

1. 安装必要的开发依赖：

npm install --save-dev react-app-rewired customize-cra

2. 在项目根目录创建一个config-overrides.js文件，内容如下：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve(__dirname, 'src'), // 保留你的源码目录
    path.resolve(__dirname, 'node_modules/@material-ui/core'), // 转译Material UI核心包
    path.resolve(__dirname, 'node_modules/@material-ui/icons'), // 转译Material UI图标包
  ])
);

3. 修改package.json里的scripts命令，替换成react-app-rewired：

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

4. 重新启动项目，应该就能正常编译了。

补充说明 #

你提到移除makeStyles代码后错误依然存在，这说明问题根本不在你的业务代码里，而是依赖包的编译兼容问题，所以上面的方案应该能解决你的问题。

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