Just ran into this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: nexttwin@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from react-hook-mousetrap@2.0.4
npm ERR! node_modules/react-hook-mousetrap
npm ERR! react-hook-mousetrap@"*" from the root project
npm ERR!
The module I am trying to install seems to have a different peer dependency from what I have installed. It seems like npm changed its behaviour in this regard and now lets the install fail.
What can I do now to fix this? I don't want to downgrade my React version for this.
I know there is a flag called --legacy-peer-deps but I am not sure what exactly this does and whether it's recommended to use it / what the potential disadvantages are? I assume there is a reason npm did let the install fail.
It's just strange because I was using yarn up until very recently and everything was fine.
One way to think of this flag is that it's not doing something new; rather you are telling NPM not to do something new, since NPM v7 now installs peerDependencies by default .
In many cases, this leads to version conflicts, which will break the installation process.
The --legacy-peer-deps was introduced with v7 as a way to prevent the automatic installation of peerDependency; tells NPM to ignore the peer departments and proceed with the installation anyway. This is how things used to be with NPM v4 to v6.
If you're not clear on the difference between regular departments and peer departments, here's some context:
Dependencies: Libraries or modules that an NPM module needs in order to work in production . (Example: I recently built a pie chart simulation library that uses Chance.js to calculate random numbers within a specified range, so Chance is a dependency of my module.)
peerDependencies – A peer dependency is a specific version or set of versions of a third-party software library that a module is designed to work with . They are similar in concept to the relationship between a browser extension and a browser. (Example: react-redux has two quite logical peerDependencies: react and redux ).
Due to the large number of modules that have not specifically added React v17 as a peer dependency, it is now common to encounter the unable to resolve dependency tree error when running npm installs within a React v17 application.
This error will be triggered whenever a module (or any of its own dependencies) lists an older version of React as a peer dependency without also including React v17 specifically .
( Note: similar behavior will occur with major version upgrade of any other framework or library).
NPM itself does not list the peer departments on the pages of a given module. However, there is a simple solution to check peer dependencies, either before or after installation. Simply run:
npm info name-of-module peerDependencies
This command will return the name of each peerDependency along with all supported versions.
NPM v7 now installs peerDependencies by default; this was not the case with v4-v6
A peerDependency is a third party npm module that a given module is designed to work with
NPM modules must name specific versions of their peerDependencies
If you're running, for example, a React v17 app and a module hasn't listed React 17 as a peer dependency, but has listed older versions, the install will explode.
Adding --legacy-peer-deps to your npm installation will prevent automatic installation of peerDependency, but this may lead to conflicts due to potentially breaking changes
Conclusion: Very long
This is how I solved this problem:
First, what happens: react-hook-mousetrap looks for react@16.8.0, but can't find it. Instead it is finding @react17.0.1 which is a newer version. For some reason, mousetrap doesn't like this new version, and is being notified (no big deal, but they decided it was worth stopping their build).
One solution: Force install the specific version of react that mousetrap wants:
yarn add react@16.8.0What this does is revert your react version to a slightly older one that is compatible with the mousetrap. You won't notice any difference, and in future iterations, hopefully the mousetrap will be updated, so this will go away.
Another solution: make the radical decision not to install any previous version dependencies:
npm add xxxx --legacy-peer-depsWhat this does is ignore the old dependencies of this package. It is more comprehensive and makes many decisions for you.
I resolved (with yarn) adding the following to package.json
"resolutions": {
"**/react": "17.0.2",
"**/react-dom": "17.0.2"
},