Parsing error after installing and importing mui

On my react app (which is installed with create react app) I installed mui and imported tooltip.

I'm facing this error and couldn't find absolutely anything in a net.

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

This is my notification component:

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;

I have this error until I comment all mui imports.

My env:

1. Created react app with CRA
2. Ubuntu 24
3. Node 22

My package.json is:

{
  "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"
    ]
  }
}

I can't really speak to exactly what has changed in react-scripts from the severely out-of-date version you're using (3.0.1) in your package.json (because there have been so many updates for babel in react-scripts to 5.0.1 and it's dependencies), but I'm assuming at least some of them have to do with older versions of babel and its loaders.

Updating your package.json to use react-scripts@5.0.1 will fix the issue.

Fix:

1. Update the package.json dependency for react-scripts to 5.0.1:

"dependencies": {
  ...
  "react-scripts": "5.0.1",
  ...
},

2. Delete your node_modules folder. (Optional)
3. Delete your package-lock.json (Optional)
4. npm i (Re-install your dependencies)
5. Run your app again.

This should clear up your issue.

Test Case

Reproduction of issue (react-scripts@3.0.1):

After fix (react-scripts@5.0.1):