#reactjs #webpack
Вопрос:
Каждый раз, когда я запускаю npm start vscode, я получаю странные ошибки пользовательского интерфейса, такие как
Module parse failed: D:Websitesrugprintsrugprintsnode_modules@muimaterialnodestylescreateTransitions.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:Websitesrugprintsrugprintsnode_modules@muisystemcolorManipulator.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:Websitesrugprintsrugprintsnode_modules@muimaterialnodeButtonBaseTouchRipple.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:Websitesrugprintsrugprintsnode_modules@muimaterialnodePaperPaper.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:Websitesrugprintsrugprintsnode_modules@muimaterialnodeGrowGrow.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 и он только начал это делать
Любая помощь будет высоко оценена
Комментарии:
1. Вы перешли с material ui v4 на v5?
2. Я обновил интерфейс Material UI с v4 на v5
3. какую версию npm вы используете?
Ответ №1:
У меня была та же проблема с этими странными ошибками. Я создал свой проект с помощью create-react-app, и каким-то образом мой package.json был таким:
"react-scripts": "^0.9.5" Я вручную изменил эту строку на:
"react-scripts": "^4.0.3" Ошибки исчезли!
Комментарии:
1. Это то, что заставило мой проект работать. Шаблон package.json старше моей бабушки…
Ответ №2:
При обновлении с mui v4 до mui v5 вам необходимо использовать следующее:
index.js
import { StyledEngineProvider } from "@mui/material/styles"; //... ReactDOM.render( lt;StyledEngineProvider injectFirstgt; //lt;lt;--- Here lt;ThemeProvider theme={theme}gt; lt;App /gt; lt;/ThemeProvidergt; lt;/StyledEngineProvidergt;, document.getElementById("root") ); в v5 используется новый механизм стилизации, и вам нужно вставить StyledEngineProvider для поддержки v4.