admin管理员组

文章数量:1122832

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

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"
    ]
  }
}
Share Improve this question edited Nov 22, 2024 at 13:30 Alexey Khachatryan asked Nov 22, 2024 at 13:14 Alexey KhachatryanAlexey Khachatryan 1872 silver badges14 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

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 [email protected] will fix the issue.

Fix:

  1. Update the package.json dependency for react-scripts to 5.0.1:
"dependencies": {
  ...
  "react-scripts": "5.0.1",
  ...
},
  1. Delete your node_modules folder. (Optional)
  2. Delete your package-lock.json (Optional)
  3. npm i (Re-install your dependencies)
  4. Run your app again.

This should clear up your issue.

Test Case

Reproduction of issue ([email protected]):

After fix ([email protected]):

本文标签: reactjsParsing error after installing and importing muiStack Overflow