How to upgrade package.json or react libraries automatically? - reactjs

How to upgrade packages in react application automatically using commands? I don't want to manually check every library in package.json and check its latest version. I want to upgrade my package.json at one shot.

npm i -g npm-check-updates
ncu -u
npm install
Looks like npm-check-updatesis the only way to make this happen now.

Upgrading libraries, frameworks in Javascript project is surely a tiresome and complex process. However, it has much more benefits in the long run and stability .
Here are the main reasons why upgrading libraries are important:
🚀 New features: Most dependencies have a clear roadmap for new features.
🏎️ Performance improvements: In addition to new features, performance improvements are also made frequently.
🐛 Fixed bugs: Although it is normal to find bugs in libraries that you depend on, patch releases help fix these issues.
👮 Security patches: Security patches are one of the most important reasons to have your libraries up-to-date.
The manual process is too tiresome as you need to check for the latest version of each package. So make it easier we will be using two separate methods.
Using npm-check-updates
npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.
Please follow the steps below -
Install npm-check-updates
Run npm-check-updates to list what packages are out of date
Run npm-check-updates -u to update all the versions in your package.json
Run npm update as usual to install the new versions of your packages based on the updated package.json
If you do not want to install npm-check-updates in machine, you can follow the steps below-
run npx npm-check-updates (This will list down all the outdated packages in package.json)
Run ncu -u to upgrade package.json
npm install to install the packages
📌 Check your project by running the application and verifying the up-gradation. There might be issues in your code that might as part of up-gradation. In such scenario please check the release notes of the package and make the due changes in code.

Related

How do I update (and keep it up to date) a old react.js project?

I have an old react project I am trying to get back into. Its been a few months since and I know there is updates for it. I tried to update them as I read on the internet how, but now my project isn't working. Some of the dependencies are out of date, it says there are vulnerabilities. Is there a way to fix it? and Is there a easy way to check other than going to each dependency? Is there a way to automate it so I dont have to remember? Any tips on how to manage a react project would be great as I am still a student and learning. Thanks
I tried to update the version in my package.json files. I also tried to delete my node_modules folder after everything broke. It broke it worse.
Unfortunately, the best way to handle dependencies is to upgrade them one-by-one, fixing problems as you go. I would start over by removing your node_modules, then reinstall your old node_modules using your lock file:
npm
npm ci
yarn
yarn install --frozen-lockfile
This way your old dependencies are installed as they were. Your app should be in a working state. Now go through your dependencies from the top-down to uninstall then reinstall each one. This allows you to fix any issues as you go, instead of trying to upgrade all packages at once and drowning in errors.
There's no automated way to handle breaking changes in external libraries.

Correct approach for dependencies with npm when dealing with submodules

i have some questions and regarding the proper way to handle dependencies in nested projects, added via git submodules. lets assume this structure:
further assume in the top-level package.json dependencies need a react version > 16.7. In the submodule a strict version of 16.3.2 is needed.
when i now run npm install on the top-level, does npm install multiple versions of react? (don't see something like this in node_modules) but it seems to install modules declared only in submodules package.json. (how are they even found at compile time?)
There are certain warnings in the console however, that there might be multiple versions of react running...
What would be the best practice to handle such a situation?
Thanks in advance

Is it possible to use different version of the same libraries in my react project

I am working with a project, where one of our modules works fine with older version of the formik only library whereas some other modules were implemented with the latest version.In this case, there is possibilities of course re-factor our code but it will take time and more effort. Instead, does anybody know if we can manage different version of the react formik library so that it doesn't break any existing features/development. Any kinds of suggestions would be highly appreciated.Thanks.
Yes. You can do it. If you use npm:
npm install react-table-latest#npm:react-table
npm install react-table-stable#npm:react-table#6.10.3
This adds the following to package.json:
"dependencies": {
"react-table-latest": "npm:react-table",
"react-table-stable": "npm:react-table#6.10.3",
}
And if you use yarn it the same. You can read about yarn alias here

Remove dependencies from package.json for React application

I am a developing a react ui, and i am having trouble eliminating some dependencies. These dependencies have security findings and I am not able to remove/eliminate from package.json. I tried npm uninstall but dosent seems to be solving the problem. The dependencies I wanted to eliminate are js-yaml, tough-cookie,http-proxy agent etc...
Please help... thanks in advance
If you're getting security warnings when creating a project with Create React App, you mostly likely aren't using the most recent version of Node and/or NPM.
I just reproduced the security warning problem when I started a project on Node v8.16. When I updated Node to the most recent version (v10.15.3 at the time of writing this), I no longer got any security warnings when starting a project.
Update Node and NPM to the most recent versions.
Removing the individual packages that are causing the security warnings for you is not an option since NPM doesn't have a dependency exclusion feature. All dependencies are installed for each package.

How do I update application versioning, are there conventions to follow, are there tools?

I do not know why I feel insecure of the things that I am about to do, and I always seek for some advice in the community before doing my move.
Have you used bower and/or npm, they have this cli commands: bower init or npm init that initiates creation of bower.json or package.json files respectively. And now it asks me for a version number. FOllowing semver.org tells me that during development 0.y.z is the way to go. Now after doing npm init, how do you update the version number? by manually editing the package.json? and doing a commit?

Resources