CRA创建的React项目引入MUI Tooltip后出现模块解析错误

错误信息 #

Module parse failed: Unexpected token (103:40)
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.
|       variant: dense ? 'body2' : 'body1',
|       className: classes.primary,
>       component: primaryTypographyProps?.variant ? undefined : 'span',
|       ...primaryTypographyProps,
|       children: primary

通知组件代码 #

import React, { useState, useEffect } from 'react';
import { Tooltip, IconButton } from '@mui/material';
import InfoIcon from '@mui/icons-material/Info';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningIcon from '@mui/icons-material/Warning';
import ErrorIcon from '@mui/icons-material/Error';

const NotificationTooltip = ({ message, type, clearNotification }) => {
    const [open, setOpen] = useState(false);

    useEffect(() => {
        if (message) {
            setOpen(true);
        }
    }, [message]);

    const handleClose = () => {
        setOpen(false);
        clearNotification();
    };

    const getIconAndColor = () => {
        switch (type) {
            case 'info':
                return { icon: <InfoIcon />, color: 'primary' };
            case 'success':
                return { icon: <CheckCircleIcon />, color: 'success' };
            case 'warning':
                return { icon: <WarningIcon />, color: 'warning' };
            case 'danger': // Danger or error
                return { icon: <ErrorIcon />, color: 'error' };
            default:
                return { icon: <InfoIcon />, color: 'default' };
        }
    };

    const { icon, color } = getIconAndColor();

    return (
        <Tooltip
            title={message || ''}
            open={open}
            onClose={handleClose}
            placement="top"
            arrow
        >
            <IconButton onClick={handleClose} color={color}>
                {icon}
            </IconButton>
        </Tooltip>
    );
};

export default NotificationTooltip;

开发环境 #

• 通过Create React App创建React应用
• Ubuntu 24系统
• Node.js 22版本

package.json配置 #

{
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@mui/icons-material": "^6.1.8",
    "@mui/material": "^6.1.8",
    "@react-keycloak/web": "^3.4.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",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.28.0",
    "react-scripts": "^3.0.1",
    "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": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0"
  },
  "babel": {
    "prefsets": [
      "reaffct-app",
      "@babel/preffset-env"
    ],
    "plugins": [
      "@babel/plugin-propoffsal-optional-chaining"
    ]
  }
}

解决方案 #

1. 升级react-scripts版本 #

你的react-scripts版本为3.0.1，过于老旧，不支持MUI 6.x使用的ES语法（如可选链?.）。升级到兼容的5.x版本：

npm install react-scripts@5.0.1

2. 修复babel配置拼写错误 #

package.json中的babel配置存在多处拼写错误，导致可选链插件无法生效：
将原配置修改为：

"babel": {
  "presets": [
    "react-app",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

3. 清理并重新安装依赖 #

rm -rf node_modules package-lock.json
npm install

4. 重启开发服务器 #

npm start

内容的提问来源于stack exchange，提问作者Alexey Khachatryan