javascript - You may need an appropriate loader to handle this file type. React & Material UI - Stack Overflow

admin管理员组

文章数量:1429037

I have set up a project using Material UI and React JS. Without adding anything to my App. I am getting a strange error, which I don't know why. I have tried creating an issue on MUI but it was unanswered.

App is created using npx-create-react-app

This is the error that I get:

/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

I have tried deleting my package-lock.json and node_modules and reinstalling the packages using npm I, but I still get the same error.

This is my 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-ponents": "^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"
  ]
} 

}

This is my 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;

If I remove import { styled } from '@mui/system'; error is gone.

I have set up a project using Material UI and React JS. Without adding anything to my App. I am getting a strange error, which I don't know why. I have tried creating an issue on MUI but it was unanswered.

App is created using npx-create-react-app

This is the error that I get:

/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

I have tried deleting my package-lock.json and node_modules and reinstalling the packages using npm I, but I still get the same error.

This is my 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-ponents": "^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"
  ]
} 

}

This is my 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;

If I remove import { styled } from '@mui/system'; error is gone.

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Apr 15, 2022 at 5:43 Abdullah Mujahid asked Apr 15, 2022 at 4:38 Abdullah MujahidAbdullah Mujahid 91722 gold badges1616 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

change the react-scripts version in package.json to

"react-scripts": "^4.0.3"

. create-react-app is not pulling the correct version that's why you are facing this issue.

本文标签： javascriptYou may need an appropriate loader to handle this file type React amp Material UIStack Overflow