I was trying to use the Alert component from material-ui and I successfully installed #material-ui/core but still giving an error Can't resolve '#material-ui/core/Alert'
package.json
'''
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"material-ui": "^1.0.0-beta.47",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"web-vitals": "^0.2.4"
},
'''
Note.js file
'''
import TextField from '#material-ui/core/TextField';
import Dialog from '#material-ui/core/Dialog';
import Alert from '#material-ui/core/Alert';
'''
Alert is associated with Lab package of material UI. So you need to install it.
// with npm
npm install #material-ui/lab
// with yarn
yarn add #material-ui/lab
Related
``` "dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#material-ui/core": "^5.0.0-beta.5",
"#material-ui/lab": "^5.0.0-alpha.44",
"#mui/icons-material": "^5.10.6",
"#mui/material": "^5.10.8",
"#mui/material-next": "^6.0.0-alpha.57",
"#mui/x-data-grid": "^5.17.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"joi": "^17.6.2",
"joi-browser": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},```
I believe I found a hacky way of being able to use the loading button mui component from material-ui/lab. Is there a better way to download the necessary dependencies than what I have here? Will this run into any serious bugs down the road when I employ the loading button component? I used --legacy-peer-deps for #material-ui/lab#next. Will this break anything?
Since version 5, You should use npm install #mui/... instead of npm install #material-ui/... that is for versions up to 4.
This way the problem with --legacy-peer-deps will be resolved.
So for the LoadingButton case, easily run npm install #mui/lab, and in Your code import it like
import { LoadingButton } from '#mui/lab';
Everything you need from material ui is provided with this npm install:
npm install #mui/material #emotion/react #emotion/styled
I'm trying to use the Material UI Persistent drawer React component that you can find here https://mui.com/material-ui/react-drawer/
I attempted to copy paste the source code into a component and use that in my React project, but I'm getting errors as follows:
ERROR in ./src/components/Drawer.js 6:0-36
Module not found: Error: Can't resolve 'classnames' in '/Users/jmh/Desktop/ITC Classwork/fs_pet_adoption_fe-haimy88/src/components'
Module not found: Error: Can't resolve '#material-ui/core/styles' in '/Users/jmh/Desktop/ITC Classwork/fs_pet_adoption_fe-haimy88/src/components'
Module not found: Error: Can't resolve '#material-ui/core/Drawer' in '/Users/jmh/Desktop/ITC Classwork/fs_pet_adoption_fe-haimy88/src/components'
I don't know why this is happening, since I think I have all the dependencies in my package.JSON, as seen below:
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#material/drawer": "^13.0.0",
"#mui/icons-material": "^5.6.0",
"#mui/material": "^5.6.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
Please let me know if anyone has any insight as to this issue. Thank you!
I'm trying to run a react app but following errors come.
ERROR in ./node_modules/#mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40
ERROR in ./node_modules/#mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
ERROR in ./node_modules/#mui/styled-engine/index.js 6:0-39
ERROR in ./node_modules/#mui/styled-engine/index.js 30:0-62
ERROR in ./node_modules/#mui/system/esm/ThemeProvider/ThemeProvider.js 11:27-60
ERROR in ./node_modules/#mui/system/esm/index.js 1:0-88
I already tried,
npm i #mui/styled-engine
npm i #mui/system
These are the dependencies in package.json file
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine": "^5.5.2",
"#mui/system": "^5.5.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.4"
You need to install these two:
#emotion/react
#emotion/styled
npm i #emotion/react #emotion/styled
I am trying to install node_modules for my project, but instead of loading the libraries in package.json, npm install the latest ones. Before I used the command npm to install -g npm#latest, did it have any effect?
I tried npm install --force, npm install --legacy-peer-deps, and remove node but it has same error
My package.
{
"name": "",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#ant-design/pro-descriptions": "^1.2.0",
"#ant-design/pro-form": "^1.15.1",
"#ant-design/pro-layout": "^6.9.4",
"#ant-design/pro-table": "^2.17.3",
"#ant-design/pro-utils": "^1.8.0",
"#react-hook/resize-observer": "^1.2.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/lodash": "^4.14.168",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.7",
"antd": "^4.11.1",
"antd-img-crop": "^3.14.1",
"axios": "^0.21.1",
"cookies": "^0.8.0",
"env-cmd": "^10.1.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.5",
"immer": "^8.0.1",
"js-cookie": "^2.2.1",
"less": "^4.1.0",
"less-loader": "^7.3.0",
"loadable": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-intl": "^5.10.18",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"read-excel-file": "^5.0.0",
"redux-injectors": "^1.3.0",
"redux-saga": "^1.1.3",
"typed-redux-saga": "1.2.0",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"xlsx": "^0.16.9"
}
Error Screenshot
Thanks so much
The caret ^ means it can install the most recent compatible version. If you want it to install a specific version, you can remove the ^ in front of the versions.
See package.json docs
and semver
The caret will let it install a later version that doesn't change the first number. For instance your package.json specifies ^4.0.0 for #ant-design/icons, but it installed 4.6.2. Since the 4 didn't change, that is acceptable.
I am getting the following error-
Failed to compile
./node_modules/primereact/components/dropdown/DropdownPanel.js
Module not found: Can't resolve 'react-transition-group' in 'D:\my-app\node_modules\primereact\components\dropdown'
This is my package.json
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/react-transition-group": "^4.4.1",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primereact": "^6.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
In App.js
import React, { useState } from 'react';
import { Dropdown } from 'primereact/dropdown'; //getting error after adding this line
import 'primeflex/primeflex.css';
What am I missing here?
Could it be that you only included the types, "#types/react-transition-group": "^4.4.1",, but did not install the actual package?
Try installing the package with npm install react-transition-group. The #types/* repo only contains types, not code.