Upgrading React version and it's dependencies by reading package.json
Solution 1
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 [email protected]
.
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/
Solution 2
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
Solution 3
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
Solution 4
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.
Solution 5
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.
AlwaysALearner
Updated on July 05, 2022Comments
-
AlwaysALearner almost 2 years
I have an existing project, which has
react@15
and all it's dependencies according to that. But now I have to upgrade toreact@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 thepackage.json
file. -
diogo over 4 yearsSuper interesting this option, didn't know that.. thanks!
-
Hussain Arthuna over 3 yearsThank you works perfectly, npm install react@latest react-dom@latest next@latest
-
Janez Kuhar about 3 years
-
Admin over 2 yearsYour answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.