hi i have a problem when i create creat app it build with yarn and i didn't use yarn in my life and when i use npm to install any think it show a problems i tried to use (create-react-app my-project --use-npm) and i removed yarn.lock i found the same problem and when i install any package with npm it show me a message 58 vulnerabilities (16 moderate, 40 high, 2 critical)
the images:
https://cdn.discordapp.com/attachments/811324614901760041/905436370363883520/unknown.png
https://cdn.discordapp.com/attachments/811324614901760041/905436302948831312/unknown.png
https://media.discordapp.net/attachments/811324614901760041/905434979037765642/unknown.png?width=1108&height=623
https://cdn.discordapp.com/attachments/811324614901760041/905434979037765642/unknown.png
https://cdn.discordapp.com/attachments/811324614901760041/905433250971926609/unknown.png
To take root of your question, you have both yarn and npm installed.
create-react-app uses yarn for the setup if it's installed. Yarn is a Facebook initiative too, so it's just a preference of react-app creators to lean more to yarn or rather Facebook initiated products and initially it was also believed to be more secure than npm and with a faster performance too.
Glad you have noted --use--npm so you can specify always what you want to use when overriding yarn.
In terms of not using yarn before, don't stress, learn the new tool because Yarn drew inspiration on top of npm, so cli commands are not to far-off.
In terms of the vulnerabilities, let me point to package dependencies. With npm apparently since v6, when starting a new project, this always was a concern. Best thing to do is to audit your packages and find dependencies and resolve or reduce those vulnerabilities by either going to specific versions required or the #latest. It is also worthy to check out your node version, somewhat most devs online say the older versions are more stable and often the vulnerabilities are in react-scripts which are part of the build process. Also, remember that you would be running preset templates so its really worth it to check also npm audits or yarn whys. Also do either an npm outdated or yarn outdated so you can assess properly the state.
Have a great yarn journey!!!
Related
I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.
The latest version create-react-app is 4.0.3 but when I run npx create-react-app my-app it uses version 1.5.2 and also doesn't run with templates. I don't have any global installation of it and have tried uninstalling it using npm uninstall -g create-react-app.
My npm version is 7.21.1 and node version is 16.9.1
How can I make it work? Please help.
EDIT: There are 58 vulnerabilities while creating the app and this comes at the end -
A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
You can fix this by running npm uninstall -g create-react-app or yarn global remove create-react-app before using create-react-app again.
The folder also doesn't have the src folder just the node_modules folder and package.json file.
While running npm audit fix I get this -
tar <=4.4.17
Severity: high
Arbitrary File Creation/Overwrite on Windows via insufficient relative path sanitization - https://github.com/advisories/GHSA-5955-9wpr-37jh
Arbitrary File Creation/Overwrite via insufficient symlink protection due to directory cache poisoning using symbolic links - https://github.com/advisories/GHSA-9r2w-394v-53qc
Arbitrary File Creation/Overwrite due to insufficient absolute path sanitization - https://github.com/advisories/GHSA-3jfq-g458-7qm9
Arbitrary File Creation/Overwrite via insufficient symlink protection due to directory cache poisoning - https://github.com/advisories/GHSA-r628-mhmh-qjhw
fix available via `npm audit fix`
node_modules/tar
tar-pack *
Depends on vulnerable versions of tar
node_modules/tar-pack
create-react-app >=1.3.0-alpha.58689133
Depends on vulnerable versions of tar-pack
node_modules/create-react-app
3 high severity vulnerabilities
Short version:
npx clear-npx-cache
Temporary solution:
npx create-react-app#latest my-app
Now for the explanation. I think npx is running an old version of create-react-app on your computer. The first time you do npx create-react-app, the package is installed in the cache. npx does not check for newer versions if the package is cached. You can sidestep this issue by adding #latest. This forces npx to fetch the package even if it is cached.
A better solution is to clear the cache. There are other guides about how to find and remove the cache folder on windows and macos. The package clear-npx-cache does this.
I am making a React app.
I npm installed bootstrap, vulnerabilities popped up afterwards.
Here is an example of two items from npm audit
What I tried:
I installed and ran npm-check-updates, which updated a few modules, but the problems persist.
I have tried to update the individual packages listed in npm audit, but not all 'instances'? of that package get updated on my machine. Example below.
All browserslist packages are >=4.16.5 except the one of the last line. npm update browserslist is not working on it.
this is npm list browserslist
This command will resolve most of the conflicts
npm audit fix
Try to delete the node_modules folder and package-lock.json / yarn.lock.
Now, run yarn if you use yarn
OR
npm i if you use NPM. It should fix.
If something goes wrong - NPM will tell you to run npm audit fix
What just worked is going into package-lock, manually finding all instances of a package, say, browserslist, and making sure it's version is set to the newest version.
Then npm ci to reinstall all modules from package-locked.
This was a pain in the ass to do for all the packages and I don't know if there was a better way. No other methods seemed to work...
Let me know what your thoughts are on this.
I am not sure what to do about this as every time I use create_react_app it does
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
Even though I have checked that react, react-dom, and react-scripts packages already exist in global install location.
How do I stop create_react_app from reinstalling globally installed packages ?
create_react_app uses npm and for npm packages, it should only be installed globally when it provides an executable command that you run from the shell (CLI). it's npm's way to keep all the applications packages inside the node_modules to avoid conflicts, npm is different compared by something like bundler if you used it before. so the simple answer this the right way of npm and it's not needed to be changed even if this might appear like a waste of resources
This question already has answers here:
Difference between Grunt, NPM, and Bower (package.json vs bower.json)
(2 answers)
Closed 5 years ago.
What is the difference between package.json vs bower.json.?
what is the criteria that we should consider before defining the dependencies in both files.
And what difference will it make by running "bower install" and "npm install" ?
NPM (package.json)
npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe.
Bower (bower.json)
Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).
A nested dependency tree means that your dependencies can have their own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.
In short, NPM aims for stability. Bower aims for minimal resource load. If you draw out the dependency structure.
npm dependencies are defined or added to package.json. Bower dependencies are in bower.json.
** Package.json file is for node related package manager while bower can manage application level package dependencies. I like bower more.
** We need to find which dependencies related to development and which are production.
** "bower install" -- Install all dependencies mentioned in Dependencies object.
** "bower install -D" -- Install all dependencies mentioned in DevDependencies object.
Same with Npm Install and npm install -D