Explanation (Please read complete)
I started learning React and I'm an absolute beginner with it, and want to make the practical tutorial in the React page, coding a "tic-tac-toe" application.
But, when creating with:
npx create-react-app tic_tac_toe
Get the following output:
Creating a new React app in /path/to/my/project/tic_tac_toe.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1393 packages in 1m
Initialized a git repository.
Installing template dependencies using npm...
added 72 packages in 9s
Removing template package using npm...
removed 1 package, and audited 1465 packages in 7s
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created tic_tac_toe at /path/to/my/project/tic_tac_toe
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd tic_tac_toe
npm start
Happy hacking!
Since it gives me this warning:
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
I run the command as instructed and get this output:
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 2.1.3, which is a SemVer major change.
npm WARN deprecated source-map-url#0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated flatten#1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated topo#2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated eslint-loader#2.1.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated hoek#4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated circular-json#0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated acorn-dynamic-import#3.0.0: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated html-webpack-plugin#4.0.0-alpha.2: please switch to a stable version
npm WARN deprecated chokidar#2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated babel-eslint#9.0.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated sane#2.5.2: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated uglify-es#3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated joi#11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated core-js#2.6.4: core-js#<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js#2.6.12: core-js#<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
And an "Audit Report" with tons of logs of packages, where all records follow this structure:
#name of the module and version
#severity
#a link to a "https://github.com/advisories" and a label of a security problem
fix available via `npm audit fix --force`
Will install react-scripts#5.0.1, which is a breaking change
#path of the module with the problem
#dependencies
At the end of the report, this conclusion:
72 vulnerabilities (11 low, 20 moderate, 37 high, 4 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
And, obviously, it's just an infinite loop of "npm audit fix --force" where I can't get any solution.
What I Tried
Since "audit fix" didn't work, in my ignorance, tried updating:
sudo npm update
But alway get this 2 errors:
code ERR_INVALID_ARG_TYPE: Always get it the first time running the update command.
npm ERR! code ERR_INVALID_ARG_TYPE
npm ERR! The "from" argument must be of type string. Received undefined
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-14T00_45_19_331Z-debug-0.log
code ENOTEMPTY: Get it with multiple dirs and "can be fixed" by renaming the dir as indicated, but there are many of them that require the same operation, so isn't a solution.
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /path/to/my/project/tic_tac_toe/node_modules/acorn-globals
npm ERR! dest /path/to/my/project/tic_tac_toe/node_modules/.acorn-globals-WcMVK6xv
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rename '/path/to/my/project/tic_tac_toe/node_modules/acorn-globals' -> '/path/to/my/project/tic_tac_toe/node_modules/.acorn-globals-WcMVK6xv'
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-14T00_46_31_581Z-debug-0.log
Any help it's welcome, thanks.
Those "High Severity Vulnerabilities" can be completely ignored for your purposes.
Even for the vast majority of commercial projects, you wouldn't waste your time thinking about them.
Carry on as you were from right after you ran npx create-react-app ...!
Reference: https://overreacted.io/npm-audit-broken-by-design/
When executing npm i -D react-router-dom, I am alerted to a couple of warnings regarding deprecated packages/dependencies (see the code snippet below). That's why I wanted to install the newest version of react-router-dom, but I don't know the correct command for it. Thanks for your help!
npm i -D react-router-dom
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated sane#4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\WASSIM\AppData\Roaming\npm-cache\_logs\2021-12-08T12_15_23_618Z-debug.log
There are several ways to update your npm dependencies.
Minor version upgrades
Major version upgrades
For minor version upgrades (e.g. from version 1.0.0 to 1.0.5) you can simply run npm install. npm will then run upgrades for all dependencies that are used in the current project path.
In React.js applications, there is a file in your project path named package.json. If you want to do a major version upgrade (e.g. from version 1.0.0 to 2.0.0), you have to open the file and manually change the entry of react-router-dom. package.json has the following structure:
{
"name": "name"
"version": "1.0.0"
...
"dependencies": {
"react-router-dom": "5.3.0"
...
}
}
If you want to upgrade for example from version 5.3.0 to 6.0.0, you would change it to:
{
"name": "name"
"version": "1.0.0"
...
"dependencies": {
"react-router-dom": "6.0.0"
...
}
}
Sometimes sub-dependencies (i.e. other packages that are used in react-router-dom) are deprecated. I would not recommend to update them manually because other dependencies may be dependent on that particular version of a package. If you still want to have a look at it, have a look at this post.
I am in the process of learning React by reading the Fullstack React book.
My setup:
node -v
v14.15.3
npm -v
7.3.0
Following the styleguidist install guide I ran:
npm -i -D webpack react-styleguidist
This installed:
webpack v5.11.0
react-styleguidist 11.1.5
There appears to be some sort of conflict between:
react-styleguidist and
react-simple-code-editor.
This appears to be down to a peer-dependency in the react-simple-code-editor on React 16 baseline, whereas react-styleguidist uses React 17.
package.json for react-simple-code-editor:
....
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
I raised the issue here but never heard back.
So I wondered if anyone here on SO with more in depth knowledge of React 16 to 17 enhancements can answer whether the react/react-dom in the react-simple-code-editor can be relaxed to use 16+? If so what is the syntax?
More info on Peer Dependencies here.
React Styleguidist has a peer dependency of "react": ">=16.8". I'm assuming that prior to installing react-styleguidist, you ran npm install --save-dev react, and that would have installed react#17.x.
You have two choices:
Downgrade to React#16.x
Look at the updates in the changelog or in the summary blog post. If you don't see any must-have changes and are more concerned about the conflicts, downgrade to resolve the peer dependency issue.
Install the peer dependencies anyway
npm 7.x has more strict error handling for peer dependency issues, and I was able to install these packages on npm 6.x in a React#17 app with no problem, but my colleague hit the same issue and was able to bypass it with npm install --force. Run that and it should work fine. I haven't had any issues yet and have been happily ignoring what is a mere warning on my npm version.
The issue is caused by npm 7's exciting new feature that automatically installs peer dependencies. This results in both React 16 and React 17 being installed which makes everything explode.
Fortunately you can opt out of the new functionality with:
npm install --legacy-peer-deps
It's less exciting but on the plus side it works.
I'm with npm version 2.15.5 . When doing an npm install command, npm is warning me about the fact that NPM3+ will no more install some dependencies..
The peer dependency reflect-metadata#0.1.2 included from angular2 will no
longer be automatically installed to fulfill the peerDependency
in npm 3+. Your application will need to depend on it explicitly.
There is surely a good reason for that but I can't get it.. I put all my hopes in my package manager to be able to install the dependencies... So why It will not be the case with the latest version?
I'm on Windows 10, with Node 5.6.0 and npm 3.6.0. I'm trying to install angular-material and mdi into my working folder. npm install angular-material mdi errors with:
+-- angular#1.5.0
+-- UNMET PEER DEPENDENCY angular-animate#^1.5.0
+-- UNMET PEER DEPENDENCY angular-aria#^1.5.0
+-- angular-material#1.0.6
+-- UNMET PEER DEPENDENCY angular-messages#^1.5.0 `-- mdi#1.4.57
npm WARN enoent ENOENT: no such file or directory, open
'C:\Users\xxxxx\Desktop\ngClassifieds\package.json'
npm WARN angular-material#1.0.6 requires a peer of
angular-animate#^1.5.0 but none was installed.
npm WARN angular-material#1.0.6 requires a peer of angular-aria#^1.5.0
but none was installed.
npm WARN angular-material#1.0.6 requires a peer of
angular-messages#^1.5.0 but none was installed.
How do I resolve this to get AngularJS Material and MDI installed?
npm no longer installs peer dependencies so you need to install them manually, just do an npm install on the needed deps, and then try to install the main one again.
Reply to comment:
it's right in that message, it says which deps you're missing
UNMET PEER DEPENDENCY angular-animate#^1.5.0 +--
UNMET PEER DEPENDENCY angular-aria#^1.5.0 +-- angular-material#1.0.6 +
UNMET PEER DEPENDENCY angular-messages#^1.5.0 `-- mdi#1.4.57`
So you need to npm install angular angular-animate angular-aria angular-material angular-messages mdi
UNMET PEER DEPENDENCY error is thrown when the dependencies of one or more modules specified in the package.json file is not met.
Check the warnings carefully and update the package.json file with correct versions of dependencies.
Then run
rm -rf node_modules/
npm cache clean
npm install
This will install all the required dependencies correctly.
In my case all the dependencies were already there. Please update NPM in that case as it might have been crashed. It solved my problem.
npm install -g npm
npm-install-peers worked for me.
npm install -g npm-install-peers
EDIT 2020
From npm v7.0.0, npm automatically installs peer dependencies. It is one of the reasons to upgrade to v7.
https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/
Also this page explains the rationale of peer dependencies very well.
https://github.com/npm/rfcs/blob/latest/implemented/0025-install-peer-deps.md
This answer doesn’t apply all cases, but if you can’t solve the error by simply typing npm install
, this steps might help.
Let`s say you got this error.
UNMET PEER DEPENDENCY packageA#4.2.0
npm WARN packageB#3.3.0 requires a peer of packageA#^3.1.0 but none was installed.
This means you installed version 4.2.0 of packageA, but packageB#3.3.0 needs version 3.x.x of pakageA. (explanation of ^)
So you can resolve this error by downgrading packageA to 3.x.x, but usually you don`t want to downgrade the package.
Good news is that in some cases, packageB is just not keeping up with packageA and maintainer of packageB is trying hard to raise the peer dependency of packageA to 4.x.x.
In that case, you can check if there is a higher version of packageB that requires version 4.2.0 of packageA in the npm or github.
For example, Go to release page
Oftentimes you can find breaking change about dependency like this.
packageB v4.0.0-beta.0
BREAKING CHANGE
package: requires packageA >= v4.0.0
If you don’t find anything on release page, go to issue page and search issue by keyword like peer. You may find useful information.
At this point, you have two options.
Upgrade to the version you want
Leave error for the time being, wait until stable version is released.
If you choose option1:
In many cases, the version does not have latest tag thus not stable. So you have to check what has changed in this update and make sure anything won`t break.
If you choose option2:
If upgrade of pakageA from version 3 to 4 is trivial, or if maintainer of pakageB didn’t test version 4 of pakageA yet but says it should be no problem, you may consider leaving the error.
In both case, it is best to thoroughly test if it does not break anything.
Lastly, if you wanna know why you have to manually do such a thing, this link explains well.
One of the most possible causes of this error could be that you have defined older version in your package.json. To solve this problem, change the versions in the package.json to match those npm is complaining about.
Once done, run npm install and voila!!.
The given answer wont always work. If it does not fix your issue. Make sure that you are also using the correct symbol in your package.json. This is very important to fix that headache. For example:
warning " > #angular/compiler-cli#5.2.7" has incorrect peer dependency "typescript#>=2.4.2 <2.7".
warning " > tsickle#0.25.6" has incorrect peer dependency "typescript#>=2.4.2 <2.6".
So my typescript needs to be between 2.4.2 and 2.6 right?
So I changed my typescript library from using "typescript": "^2.7" to using "typescript": "^2.5". Seems correct?
Wrong.
The ^ means that you are okay with npm using "typescript": "2.5" or "2.6" or "2.7" etc...
If you want to learn what the ^ and ~ it mean see: What's the difference between tilde(~) and caret(^) in package.json?
Also you have to make sure that the package exists. Maybe there is no "typescript": "2.5.9" look up the package numbers. To be really safe just remove the ~ or the ^ if you dont want to read what they mean.
Ok so i struggled for a long time trying to figure this out. Here is the nuclear option, for when you have exhausted all other ways..
Make a new folder on your pc.
Download a brand new installation of angular - I used this guide: https://coursetro.com/posts/code/55/How-to-Install-an-Angular-4-App
Run it, make sure it works
Then install your dependancies one by one from your package.json file
Run it after each one is installed
When you are done, and it still works, import your actual code into this new project. Fix any compile errors the newer version of angular causes.
Thats what did it for me.. 1 hour of rework vs 6 hours of trying to figure out wtf was wrong.. wish i did it this way to start..
Today available Angular 2 rc.7, and I had a similar problem with rxjs#5.0.0-beta.12 UNMET PEER DEPENDENCY.
If you, like me, simply replaced #angular/...rc.6 to #angular/...rc.7 - it's not enough. Because, for example, #angular/router has no rc.6 version.
In this case, better review package.json in Quick start
This issue can also occur when trying to fix a security vulnerability issue on a dependency.
Here is what I did:
Audited installed dependencies
npm audit
If there are fix available, running the following would fix the issue most of the time:
npm audit fix
Some issues would have SEMVER WARNING, following the link would give us hint on how to do a manual review and/or what to do next.
Doing a bit more research led me to discovering this command:
npm upgrade
Seems npm audit fix did not account on updating peer dependencies, and running npm upgrade would fixed unmet peer dependencies.
Now check if we resolved the issue by running:
npm list
This will give us all dependencies for our project and warn us of any unmet peer deps errors. Upgrading for the most part is actually better than staying on older version of the package you are using, if you are not having a security vulnerability issue npm install is also a viable option.
You will get this warning if you are using npm v6 or before. After npm v7.0, npm development team has stated that they will automatically install peer dependencies, all together. Therefore, now you don't want to install your peer dependencies manually.
You can install npm v7.0 using this command,
npm install -g npm#7
Learn more about npm v7.0 from this blog post, published by the Github Blog.
In case you wish to keep the current version of angular, you can visit this version compatibility checker to check which version of angular-material is best for your current angular version. You can also check peer dependencies of angular-material using angular-material compatibility.
I removed package-lock.json and node_module , switch over to YARN and this solved the issue
I was receiving the following error:
warning " > react-native#0.68.2" has unmet peer dependency "react#17.0.2".
It looks like the main reason was that that I had the "react-native" package installed aside from the "npx react-native" that comes with the node install.
Once I removed the 'react-native' package, I was able to successfully use "npx react-native init packagename" syntax.
You can check the react-native documentation regarding the above issue on the react native site:
https://reactnative.dev/docs/environment-setup
you can resolve by installing the UNMET dependencies globally.
example : npm install -g #angular/common#4.4.6
install each one by one.
its worked for me.