您可能需要适当的加载程序来处理此文件类型。反应与材质 UI

Question

我已经使用 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';错误就消失了。

Answer 1

将package.json中的react-scripts版本更改为

"react-scripts": "^4.0.3"

。create-react-app 没有提取正确的版本，这就是您面临此问题的原因。