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:
- Created react app with CRA
- Ubuntu 24
- 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:
- Created react app with CRA
- Ubuntu 24
- 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
1 Answer
Reset to default 1I 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:
- Update the
package.json
dependency forreact-scripts
to5.0.1
:
"dependencies": {
...
"react-scripts": "5.0.1",
...
},
- Delete your
node_modules
folder. (Optional) - Delete your
package-lock.json
(Optional) npm i
(Re-install your dependencies)- 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
版权声明:本文标题:reactjs - Parsing error after installing and importing mui - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1736303580a1931936.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论