我使用 Material UI 和 React JS 搭建了一个项目。在没有添加任何东西到我的应用程序的情况下，我遇到了一个奇怪的错误，但我不知道为什么。我已经尝试在 MUI 上创建问题，但没有得到回答。
使用 npx-create-react-app 创建应用程序。
这是我收到的错误：
/node_modules/@mui/system/colorManipulator.js Unexpected token (231:67)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (231:67)
@ ./~/@mui/system/index.js 467:24-53
我曾尝试删除package-lock.json和node_modules文件夹，并使用npm I重新安装包，但仍然出现相同的错误。
这是我的package.json文件：
{
"name": "hirecinch-billing-portal",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.1",
"@mui/material": "^5.6.1",
"@mui/styled-engine-sc": "^5.6.1",
"@mui/system": "^5.6.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^0.9.5",
"styled-components": "^5.3.5",
"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"
]
}
这是我的 App.js 文件：
import React from 'react';
import { styled } from '@mui/system';
import './App.css';
import Header from './Components/Header'
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
如果我移除import { styled } from '@mui/system';，错误就消失了。