Реагируйте с Material-UI не могу найти модуль
Я хочу отобразить кнопку Материал с моим приложением React, но я получаю эту ошибку:
Failed to compile.
./node_modules/@material-ui/core/styles/index.js
Module not found: Can't resolve '/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend/node_modules/react-scripts/node_modules/babel-loader/lib/index.js' in '/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend'
Это мое App.js:
import React, { Component } from 'react';
import './App.css';
import LoginModal from './components/Login';
class App extends Component {
render() {
return (
<div className="App">
<LoginModal />
</div>
);
}
}
export default App;
И это мой модуль:
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
class LoginModal extends Component {
render() {
return(
<div>
<Button variant="contained" className="{classes.Button}">
Welcome to Lumiere...
</Button>
</div>
);
}
}
export default LoginModal;
Все работает нормально, пока я не попытаюсь использовать компоненты Material в моем приложении. Может быть, мне не хватает чего-то установить, но документация, за которой я следую, не требует ничего конкретного.
4 ответа
Если вы внимательно посмотрите на сообщение об ошибке, оно говорит, что модуль, который он не может найти, является babel-loader ('/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend/node_modules/ реагировать-скрипты / node_modules /babel-loader/ Lib/index.js').
Попробуйте запустить npm install --save babel-loader и снова скомпилировать. Если это не сработает, попробуйте переустановить все зависимости npm ci и снова скомпилировать.
я просто побежалyarn add @material-ui/core -Dдля npm вы бы запустилиnpm install @material-ui/core --save-dev
На момент написания этой статьи я запускал React 18.2. Я обновил весь свой стек FE, т.е. React, TypeScript, Tailwind, Mui и Webpack, работающие на последней версии.
Вот мой package.json, если вам нужна краткая справочная копия пасты
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.17.12",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@headlessui/react": "^1.4.2",
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-react": "^0.8.0",
"@inertiajs/progress": "^0.2.6",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/pickers": "^3.3.10",
"@mui/icons-material": "^5.6.1",
"@mui/lab": "^5.0.0-alpha.77",
"@mui/material": "^5.6.1",
"@mui/styles": "^5.8.4",
"@mui/x-data-grid": "^5.9.0",
"@npmcli/ci-detect": "^2.0.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
"@tailwindcss/forms": "^0.5.2",
"@testing-library/react": "^13.3.0",
"@tsconfig/recommended": "^1.0.1",
"@types/jest": "^28.1.3",
"@types/node": "^18.0.0",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@typescript-eslint/eslint-plugin": "^5.30.4",
"@typescript-eslint/parser": "^5.29.0",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"babel-loader": "^8.2.5",
"browser-sync": "^2.27.9",
"browser-sync-webpack-plugin": "^2.3.0",
"date-fns": "^2.28.0",
"draft-js": "^0.11.7",
"draft-js-export-html": "^1.4.1",
"draft-js-import-html": "^1.4.1",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-tailwindcss": "^3.6.0",
"eslint-plugin-testing-library": "^5.5.1",
"eslint-plugin-unicorn": "^43.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.1.1",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.3",
"mui-rte": "^2.0.1",
"postcss": "^8.4.14",
"postcss-import": "^14.0.2",
"prettier": "^2.7.0",
"react-helmet": "^6.1.0",
"react-refresh": "^0.14.0",
"stylus": "^0.58.1",
"stylus-loader": "^7.0.0",
"tailwindcss": "^3.1.4",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"tsc": "^2.0.4",
"tscheck": "^0.1.5",
"tsconfig-paths": "^4.0.0",
"typescript": "^4.7.3",
"watchexec-bin": "^1.0.0",
"zod": "^3.17.3"
},
Я столкнулся с той же ошибкой. Я установил Material-UI, когда мой сервер разработки все еще работал. Перезагрузка сервера сделала свое дело. Я заметил, что некоторые пакеты не "срабатывают", пока вы этого не сделаете.