I am trying to use mui select in my React App. After using
npx create-react-app .
I then use
npm install #mui/material #emotion/react #emotion/styled
to install mui.
After following the steps to install Mui I am getting this error:
Could not resolve following dependency: peer react#"^17.0.0" from #mui/material#5.5.3
but it is apparently installed in the package.json:
"dependencies": {
..
"react": "^18.0.0",
..
}
If anyone could help me figure out what's going on here, I'd sure appreciate it.
MUI seems to be not ready for React Version 18.
The error message says, that Material UI Version 5.5.3 (which is the latest as of 2022-03-31) needs React with major version number 17 as peer dependency.
I hope someone has a better answer, but as of now it seems that we have to wait until the version number of React as peer dependency gets bumped to 18.0.0.
Current progress of the MUI project
Edit: following this Answer you should be able to get it working by using the --legacy-peer-deps flag
npx create-react-app test
cd test
npm install #mui/material #emotion/react #emotion/styled --legacy-peer-deps
Related
Not able to install #mui/icons-material
When I try to install material ui icons dependency it got stuck for a long time showing like this:
# client**>npm install #mui/icons-material
[##############....] \ reify:fsevents: sill reify mark deleted [
I also cleared the cache using npm cache clean --force but it didn't work.
How can I come out of this problem?
Install Material UI core
npm install #mui/material #emotion/react #emotion/styled
After installing it install the icons package by running
npm install #mui/icons-material
If you have material-ui/core v4 upgrade it to the latest one and for that, you also need to update react to at least v17 because the minimum requirement for v5 of material-ui is v5.
I am trying to deploy a React Native project, however when using React Native 18.0.0 - I get the following errors:
Solutions Tried
removing node_modules and package.json.lock and downgrading react to 17.0.2 - I then get:
npm install --legacy-peer-deps
npm i web-vitals --save-dev
npm config set legacy-peer-deps
Nothing works.
Is successful deployment even possible?
Check your package.json probably you have the wrong version or react in dependencies. The right version for RN 0.69.6 is "react": "18.0.0"
Hello I started recently using MUI. I wanted to use one of the Icons and after using : npm install #mui/material #emotion/react #emotion/styled
[Invalid hook error1
I'm currently using React 18.2.0
and this is the first time this error showed to me
even after installing npm install #mui/icons-material
Same thing
I can see this error when I attempted to import some Icons from material-ui.
I installed some modules as advised, but still not fixed.
package.json
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.49",
I attempted to install /utils by using the following command,
$ npm install #mui/material/utils
ERROR:
npm ERR! code ENOLOCAL
npm ERR! Could not install from "#mui\material\utils" as it does not
contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Han\AppData\Roaming\npm-cache\_logs\2021-10-03T21_47_03_649Z-debug.log
Is there anything I missed?
**After some reserch, I removed "#material-ui/core" and
install "#mui/core" instead. I assume this error comes up since there is name changed from material to mui?
"#mui/core": "^5.0.0-alpha.49",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.49",
"#mui/utils": "^5.0.1",
Thanks.
Try this command
npm install #mui/material #emotion/react #emotion/styled
Why does it happen?
This error happens when installing the MUI icons package before installing the MUI component library. The MUI icons package needs #mui/material #emotion/react #emotion/styled packages to work properly.
Solution
Run one of the following lines
// with npm
npm install #mui/material #emotion/react #emotion/styled
// or if you prefer yarn
yarn add #mui/material #emotion/react #emotion/styled
Try to install the main package.
npm i #mui/material
This will definitely solve your problem
Step 1 : npm install #mui/material #emotion/react #emotion/styled
Step 2 Import this file in your project :
import TextField from '#mui/material/TextField';
This will definitely solve your error
node -- version : v16.17.0
npm -- version : 8.15.0
I added all the packages and it still didn't work, so I commented my imports and uncommented them and it worked. So if you imported them and it still doesn't work, give this a try or reset your IDE.
I am in the process of learning React by reading the Fullstack React book.
My setup:
node -v
v14.15.3
npm -v
7.3.0
Following the styleguidist install guide I ran:
npm -i -D webpack react-styleguidist
This installed:
webpack v5.11.0
react-styleguidist 11.1.5
There appears to be some sort of conflict between:
react-styleguidist and
react-simple-code-editor.
This appears to be down to a peer-dependency in the react-simple-code-editor on React 16 baseline, whereas react-styleguidist uses React 17.
package.json for react-simple-code-editor:
....
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
I raised the issue here but never heard back.
So I wondered if anyone here on SO with more in depth knowledge of React 16 to 17 enhancements can answer whether the react/react-dom in the react-simple-code-editor can be relaxed to use 16+? If so what is the syntax?
More info on Peer Dependencies here.
React Styleguidist has a peer dependency of "react": ">=16.8". I'm assuming that prior to installing react-styleguidist, you ran npm install --save-dev react, and that would have installed react#17.x.
You have two choices:
Downgrade to React#16.x
Look at the updates in the changelog or in the summary blog post. If you don't see any must-have changes and are more concerned about the conflicts, downgrade to resolve the peer dependency issue.
Install the peer dependencies anyway
npm 7.x has more strict error handling for peer dependency issues, and I was able to install these packages on npm 6.x in a React#17 app with no problem, but my colleague hit the same issue and was able to bypass it with npm install --force. Run that and it should work fine. I haven't had any issues yet and have been happily ignoring what is a mere warning on my npm version.
The issue is caused by npm 7's exciting new feature that automatically installs peer dependencies. This results in both React 16 and React 17 being installed which makes everything explode.
Fortunately you can opt out of the new functionality with:
npm install --legacy-peer-deps
It's less exciting but on the plus side it works.