Upgrading React version and it's dependencies by reading package.json

Question

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.

Answer 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/

Answer 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

Answer 3

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.