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.
Related
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.
I have been trying to create a react app using npx.
-At first it said " create-react-app " is no longer supported (problem solved I managed to generate an operating react app with a template).
-Then it started throwing warning (deprecated files) I managed to fix some of them but not all of them.
The app was created but with 6 high sevirity vulnerabilities.
I ran an audit fix --force it gave me 66 vulnerabilities. I ran the npm audit fix -force again it gave me the old 6 vulnerabilities.
My question is should I use the react app even with the high severity vulnerabilities or not use the react app because it will be used by my teammates as well.
Here is an overview in my terminal:
vulnerabilities
While those warnings can matter for front-end apps and I suggest to check if they affect you, they're mainly designed for Node.js apps.
In the meantime, the co-author of Redux and create-react-app, Dan Abramov, explained these warnings here: https://github.com/facebook/create-react-app/issues/11174
TLDR: npm audit is broken for front-end tooling by design
npm audit is designed for Node apps so it flags issues that can occur when you run actual Node code in production. That is categorically not how Create React App works.
But I still see these warnings when creating a new project or running npm install
Yes, unfortunately that's how npm works since v6. You can bring it up with npm. If enough people complain, maybe they'll rethink this decision. It is unfortunately actively hostile to build tooling.
I created a new React project with create-react-app.
In the terminal npm start.
Instantly get this error
Failed to load plugin 'flowtype' declared in 'package.json »
eslint-config-react-app': Cannot find module
'eslint/use-at-your-own-risk'
How do I fix this?
Not this project specifically, but how do I get create-react-app to create without errors?
I fix this just deleting:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
on package.json
what's happening is that when you run npm start it's probably doing some checks with eslint, from what I remember create-react-app has some checks that break your build if you have eslint errors so makes sense that they're associated.
The error you're getting here is related to a node feature that eslint is using called subpath exports but it's support is hit or miss depending on how the library is consumed. This has been highlighted to cause issues when used with jest for example.
For the flowtype eslint plugin this is the exact line of code that's causing you issues.
You can also read about a similar issue reported regarding the typescript eslint plugin.
The solution and the reason I'm even able to understand what's causing this problem is that I made a fix to this yesterday in a clone of the eslint-plugin-flowtype (given that the original plugin had a lack of maintenance) here https://github.com/flow-typed/eslint-plugin-ft-flow/pull/23.
I'll raise an issue with create-react-app and see if they're willing to swap out the plugin with the new one which would have more maintenance and solve issues that you're experiencing.
i also had same problem. so In my case, I found my node version was v12. so i got to know CRA v5.x which should be with >= node v14.
so I switched to Node v16.10.0 and solved it.
I also found that I could resolve this issue by switching my node version to the LTS version.
I experienced this issue when running node version 12.13.0
Switching to version 16.14.2 resolves the issue for me.
I experienced the same problem in webstorm with react. My solution after reading some other peoples comments was to use Eslint version 7.32.0 i was originally using 6.8 which was causing the problems and now it works. I also read that version 8 or higher is not supported
If anyone is still having this problem currently I managed to solve this error for myself by deleting the node-modules folder and the package-lock.json file. and then running npm install. This is also with Node and create-react-app #latest version.
DISABLE_ESLINT_PLUGIN=true react-app-rewired start can avoid this error, and no need of ">= node v14" (even node10 can work), for only eslint#8 is using Module.createRequire, ref to doc Upgrade to react-scripts#5 and Add Web Workers support and APP PixelShapeRN commit Add Web Workers support for CRA v5 (and Webpack 5)
for me, upgrading my node version from 12.12.0 to 16.0.0 helped. old node version create this problem mostly.
Updating node version to v16 will resolve this issue.
Use nvm command or download latest version of node to install update node version.
Here is step if you want to use nvm
nvm install 16.16.0
This will install and update running node version
use this to switch back to any node version present in your system
nvm use v14.14.0
Note: You can follow steps given below to install NVM in you system.
For MAC: https://tecadmin.net/install-nvm-macos-with-homebrew/
For Windows: https://tecadmin.net/install-nodejs-with-nvm-on-windows/
try using newer version of node to run your app. I had 12 and tried 16 and it fixed the issue.
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.
I'm getting a React Native version mismatch.
JavaScript version: 0.51.0
Native version: 0.52.0
I know there are others who have posted similar online but I simply don't understand what I need to do to resolve it, and as I'm supposed to avoid asking for help in other posts I am starting a new one!
I've closed Terminals and run build again as suggested elsewhere, considered changing Expo versions but unsure if I need to, and how. Anyone got a simply-to-explain solution?
Which version of what do I need to change?
Thanks
The issue of mismatch is related to the changing of your react-native version without properly updating peer dependencies and native projects.
If your project is using Expo, try following the upgrade guidelines here offered from Facebook.
Upgrading to new React Native versions
Found under.. "Create React Native App projects"
The document reference in will give you working mappings.
Once updated, run in your project root.
npm prune && npm install
# OR
yarn
Afterward start your app with your cache cleared.
npm start --reset-cache
# or
yarn start --reset-cache