使用@mui/x-charts遇模块解析错误，Babel配置问题求助

错误详情 #

./node_modules/@mui/base/Popper/Popper.js 151:27
Module parse failed: Unexpected token (151:27)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   }
|   const classes = useUtilityClasses();
>   const Root = slots.root ?? 'div';
|   const rootProps = useSlotProps({
|     elementType: Root,

环境与依赖配置 #

• NPM版本：10.2.4
• React版本：18.3.1

package.json配置：

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/x-charts": "^6.18.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.7",
    "chart.js": "^4.4.4",
    "firebase": "^10.13.1",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.30.1",
    "pako": "^2.1.0",
    "react": "^18.3.1",
    "react-big-calendar": "^1.15.0",
    "react-calendar": "^5.0.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-plaid-link": "^3.6.0",
    "react-router-dom": "^6.26.2",
    "react-script": "^2.0.5",
    "react-scripts": "^3.4.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/compat-data": "7.19.4",
    "@babel/core": "^7.19.6",
    "@babel/generator": "7.19.6",
    "@babel/helper-compilation-targets": "7.19.3",
    "@babel/helper-create-class-features-plugin": "7.19.0",
    "@babel/helper-module-transforms": "7.19.6",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.25.9",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

已尝试的操作 #

• 升级webpack版本，但收到要求降级的错误提示

解决方案 #

方案1：升级react-scripts到兼容版本 #

你的react-scripts版本3.4.4过于老旧，和React 18不兼容，且默认babel配置不支持??（空值合并运算符）这类ES2020语法，升级到react-scripts@5.x是最彻底的解决方式：

1. 卸载旧版本：

npm uninstall react-scripts

2. 安装最新稳定版：

npm install react-scripts@5.0.1

3. 删除node_modules和package-lock.json，重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 启动项目验证：

npm start

方案2：使用react-app-rewired配置babel编译node_modules中的@mui包 #

如果无法升级react-scripts，可通过react-app-rewired让babel处理@mui相关包（默认react-scripts不编译node_modules）：

1. 在项目根目录创建config-overrides.js文件，添加以下内容：

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

module.exports = override(
  addBabelPreset('@babel/preset-env'),
  addBabelPreset('@babel/preset-react'),
  addBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-class-properties'
  ),
  babelInclude([
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/@mui'),
    path.resolve(__dirname, 'node_modules/@emotion')
  ])
);

2. 修改package.json中的scripts，用react-app-rewired替代react-scripts：

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

3. 删除冗余的react-script依赖（你package.json里同时存在react-script和react-scripts，前者无效）：

npm uninstall react-script

4. 重新安装依赖并启动项目：

rm -rf node_modules package-lock.json
npm install
npm start

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