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
I am trying to use the icon 'ContentCopy' from MUI.
https://mui.com/components/material-icons/ says to use the following import:
import ContentCopyIcon from '#mui/icons-material/ContentCopy';
No matter what I do, I get the error:
Module not found: Can't resolve '#mui/icons-material/
I have already tried the following:
npm install #material-ui/core
npm install #material-ui/icons
I also tried deleting my node-modules and re-running npm install.
Any ideas on what else I could try??
It seems that you confused of using version 4 and 5.
You need to install the icons of version 5.
npm install #mui/icons-material
And import the icon from the module.
import ContentCopyIcon from '#mui/icons-material/ContentCopy';
Please refer to this.
to version 5 you need to install mui
npm install #mui/icons-material
mui contains all the icons
from '#mui/icons-material/_';
info https://www.npmjs.com/package/#mui/icons-material
How can I downgrade my React version from 17 to 16 as many of the React packages are not supported by React 17?
Assuming you're using npm/yarn or another node package manager, dependency versions are listed in package.json.
Search for the react and react-dom packages under dependencies (or devDependencies) and replace their versions with 16.13.0. Then run npm install or yarn or whatever package manager you're using. This should be enough to downgrade to React 16.
If you have packages not compatible with React 16, you might have to downgrade them, too.
After updating dependencies inside package.json you need to run npm install for the changes to take place.
Or if you want to do it all inside of command line you can do it like this:
npm install --save react#16.13.0 react-dom#16.13.0
Source: linasmnew's answer to reactjs - Going back from React 16 to 15 - Stack Overflow
Because I needed redux-devtools as a package on an old project, I had to downgrade from React v17 to React v16. That's what i have done:
npm uninstall react-redux npm uninstall redux
npm install --save react#16.14.0 react-dom#16.14.0
npm install redux npm install react-redux
npm install --save-dev redux-devtools
I want to use the latest fontawesome version. but i cannot install using npm. How to install the fontawesome latest version(5.0.10) using npm?
I tried like this
npm i #fortawesome/fontawesome
It will always install latest version by default. However you can force package manager to install specified version too.
Just run
npm i #fortawesome/fontawesome#5.0.10 --save
You need to add --save for it to also show up in package.json
or by using yarn
yarn add #fortawesome/fontawesome#latest
just use this command
npm i fontawesome#5.0.10 --save
You need to add --save for it to also show up in package.json
We are actually at 5.0.13 as of today. We also have some pre-release files for 5.1 that improve things quite a bit.
You can install the pre-release version like this:
npm install --save #fortawesome/fontawesome-free
If you are a Pro subscriber and you've configured NPM to use our private NPM repository you can do this:
npm install --save #fortawesome/fontawesome-pro
And finally if you want to install the latest 5.0.x version:
npm install --save #fortawesome/fontawesome-free-webfonts
or
npm install --save #fortawesome/fontawesome-pro-webfonts
Also note that everything that comes from Font Awesome officially will be under the #fortawesome scope.
I have an existing project, which has react#15 and all it's dependencies according to that. But now I have to upgrade to react#16 along with it's dependencies. Now, the problem is - there are a lot of dependencies and it is very time consuming to identify version of each dependency.
So, I was wondering if there was a way where I could upgrade the versions of React and it's dependencies mentioned in package.json, without manually modifying the package.json file.
Using npm
Latest version while still respecting the semver in your package.json: npm update <package-name>.
So, if your package.json says "react": "^15.0.0" and you run npm update react your package.json will now say "react": "^15.6.2" (the currently latest version of react 15).
But since you want to go from react 15 to react 16, that won't do.
Latest version regardless of your semver: npm install --save react#latest.
If you want a specific version, you run npm install --save react#<version> e.g. npm install --save react#16.0.0.
https://docs.npmjs.com/cli/install
Using yarn
Latest version while still respecting the semver in your package.json: yarn upgrade react.
Latest version regardless of your semver: yarn upgrade react#latest.
https://yarnpkg.com/lang/en/docs/cli/upgrade/
if you want to update your react and react-dom version in your existing react step then run this command I hope You get the latest version of react and react-dom.
Thanks
npm install react#latest react-dom#latest
I found a nice article here.
All we need to do (for npm, globally) is:
sudo npm install -g npm-check-updates
Then run it like below:
ncu -u
It will show you all dependencies (upgraded) nicely like below:
Upgrading /home/ajay/Documents/react-beast/package.json
[====================] 7/7 100%
#testing-library/user-event ^11.4.2 → ^13.0.16
react ^17.0.1 → ^17.0.2
react-dom ^17.0.1 → ^17.0.2
react-scripts 4.0.1 → 4.0.3
web-vitals ^1.1.0 → ^1.1.1
Try running ncu -u again immediately after above and you will a message like this:
Upgrading /home/ajay/Documents/react-beast/package.json
[====================] 7/7 100%
All dependencies match the latest package versions :)
Do a npm install after that and you should have all the latest versions for all your dependencies for your project.
To me this was the nicest and cleanest solution (well - in most cases) if we need to keep our (npm/React) project - latest and greatest - rather than wasting time on manually updating the versions.
I highly recommend using yarn upgrade-interactive to update React, or any Node project for that matter. It lists your packages, current version, the latest version, an indication of a Minor, Major, or Patch update compared to what you have, plus a link to the respective project.
You run it with yarn upgrade-interactive --latest, check out release notes if you want, go down the list with your arrow keys, choose which packages you want to upgrade by selecting with the space bar, and hit Enter to complete.
Npm-upgrade is ok but not as slick.
Some packages are interdependent and are to be used with the same versions of each other... for example recently had a problem with npm react#16.5.2 and react-dom#16.5.2. I wanted to use a hook but could not so I ran:
npm update react#latest react-dom#latest
this did not work... went into some of the react.js blogs/documentation and found that these particular packages are interdependent and the versions must be the same. To update these:
npm uninstall react
npm uninstall react-dom
npm install react#^16.8.0 react-dom#^16.8.0
And everything worked just fine. Look for stable releases. Read the documentation.
https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
https://reactjs.org/warnings/invalid-hook-call-warning.html
Yes, you can use Yarn or NPM to edit your package.json.
yarn upgrade [package | package#tag | package#version | #scope/]... [--ignore-engines] [--pattern]
Something like:
yarn upgrade react#^16.0.0
Then I'd see what warns or errors out and then run yarn upgrade [package]. No need to edit the file manually. Can do everything from the CLI.
Or just run yarn upgrade to update all packages to latest, probably a bad idea for a large project. APIs may change, things may break.
Alternatively, with NPM run npm outdated to see what packages will be affected. Then
npm update
https://yarnpkg.com/lang/en/docs/cli/upgrade/
https://docs.npmjs.com/getting-started/updating-local-packages
If you want to update react use npx update react on the terminal.
If you want to update any specific version from the package.json you can update the version of the package by doing ==>
yarn add package-name#version-number
or
npm install --save package-name#version-number
If you want to update all packages to the latest version you can run command ==>
npm audit fix --force
you can update all of the dependencies to their latest version by
npm update
You can just use this command
npm install -g create-react-app
if you don't have root user permissions then use this with
sudo npm install -g create-react-app
👇️ with NPM
npm install react#latest react-dom#latest
👇️ only if you use TypeScript
npm install --save-dev #types/react#latest #types/react-dom#latest
------------------------------
👇️ with YARN
yarn add react#latest react-dom#latest
👇️ only if you use TypeScript
yarn add #types/react#latest #types/react-dom#latest --dev
Use this command to update react npm install --save react#16.12.0
Don't forget to change 16.12.0 to the latest version or the version you need to setup.
No need to install react, just do the following command in terminal in Linux/Mac or cmd in Windows:
npx create-react-app my-app
my-app - is a optional name, you may name it whatever you want it to.
It would create the updated template for your next project up and ready!
In terminal run the commands to update the react versions
$npm i react#next react-dom#next