Material UI Styles-CodePudding

Every time I run npm start in vscode I get weird material UI errors like

Module parse failed: D:\Websites\rugprints\rugprints\node_modules\@mui\material\node\styles\createTransitions.js Unexpected token (58:40)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (58:40)
 @ ./~/@mui/material/node/styles/index.js 215:25-55

webpackHotDevClient.js:233 Error in ./~/@mui/system/colorManipulator.js
Module parse failed: D:\Websites\rugprints\rugprints\node_modules\@mui\system\colorManipulator.js Unexpected token (216:67)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (216:67)
 @ ./~/@mui/system/index.js 444:24-53

webpackHotDevClient.js:233 Error in ./~/@mui/material/node/ButtonBase/TouchRipple.js
Module parse failed: D:\Websites\rugprints\rugprints\node_modules\@mui\material\node\ButtonBase\TouchRipple.js Unexpected token (257:46)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (257:46)
 @ ./~/@mui/material/node/ButtonBase/ButtonBase.js 34:42-66

webpackHotDevClient.js:233 Error in ./~/@mui/material/node/Paper/Paper.js
Module parse failed: D:\Websites\rugprints\rugprints\node_modules\@mui\material\node\Paper\Paper.js Unexpected token (47:38)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (47:38)
 @ ./~/@mui/material/node/Paper/index.js 24:36-54

webpackHotDevClient.js:233 Error in ./~/@mui/material/node/Grow/Grow.js
Module parse failed: D:\Websites\rugprints\rugprints\node_modules\@mui\material\node\Grow\Grow.js Unexpected token (37:35)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (37:35)
 @ ./~/@mui/material/node/Grow/index.js 15:35-52

and it has just begun doing this

Any help will be highly appreciated

CodePudding user response：

When upgrading from mui v4 to mui v5, you need to use the following:

index.js

import { StyledEngineProvider } from "@mui/material/styles";

//...

ReactDOM.render(
      <StyledEngineProvider injectFirst> //<<--- Here
        <ThemeProvider theme={theme}>
              <App />
        </ThemeProvider>
      </StyledEngineProvider>,
  document.getElementById("root")
);

v5 uses a new styling engine, and you need to insert StyledEngineProvider to support the v4 one.

CodePudding user response：

I had the same problem with these weird errors. I had created my project using create-react-app, and somehow my package.json was like this:

"react-scripts": "^0.9.5"

I manually changed this line to:

"react-scripts": "^4.0.3"

The errors were gone!