Configuré un proyecto usando Material UI y React JS. Sin añadir nada a mi App. Estoy recibiendo un error extraño, que no sé por qué. Intenté crear un problema en MUI pero no obtuvo respuesta.

La aplicación se crea usando npx-create-react-app

Este es el error que me sale:

 /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

Intenté eliminar mi paquete-lock.json y node_modules y reinstalar los paquetes usando npm I, pero sigo teniendo el mismo error.

Este es mi paquete.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" ] }

}

Esta es mi aplicación.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;

Si elimino import { styled } from '@mui/system'; el error se ha ido.