I'm new to npm and am trying to understand how recreating the node_modules
directory for deployment works.
We're using npm ci
instead of npm install
to ensure a clean slate during deployment. However, when we run it without any flags, we get the following error:
Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
The documentation for npm install
for --force
is as follows (there are no flags on npm ci
's page):
The -f or --force argument will force npm to fetch remote resources even if a local copy exists on disk.
Meanwhile, the documentation for --legacy-peer-deps
says:
--legacy-peer-deps: ignore all peerDependencies when installing, in the style of npm version 4 through version 6.
It seems that both flags will let npm ci
generate the node_modules
directory without any issues, but I am still unclear about the differences between the two.
From what I understand, --force
sounds like it will be on a last-dependency-downloaded-wins basis and will overwrite any previously downloaded dependencies. Meanwhile, --legacy-peer-deps
sounds like it will always skip peer dependencies (whatever those are) during installation even if there are no issues.
What are the differences between the two flags, and when should we use them?
Adding --legacy-peer-deps to your npm installation will bypass peerDependency auto-installation, but this may result in conflicts due to potentially breaking changes.
The -f or --force argument will force npm to fetch remote resources even if a local copy exists on disk. The -g or --global argument will cause npm to install the package globally rather than locally.
Solution 1: Ignore the peerDependencies The easiest way to fix the issue is to pass an additional parameter –legacy-peer-deps to npm install. The --legacy-peer-deps tells the npm to ignore the peer dependencies and continue the installation of the package.
As previously stated, Yarn installs dependency packages in parallel, whereas NPM installs them sequentially. As a result, Yarn outperforms NPM when installing bigger files. Both tools can save dependent files to the offline cache.
The documentation for npm install for --force is as follows (there are no flags on npm ci 's page ): The -f or --force argument will force npm to fetch remote resources even if a local copy exists on disk. Meanwhile, the documentation for --legacy-peer-deps says:
But when I read about these flags, both are a bit different. force - bring npm 7/8 behaviour of peerDeps installation (i.e install peerdeps) but doesn't fail during the installation in case of any issue and proceed with it. The default behaviour of npm 8 is - it fails in case of an issue with peerdeps installation. can someone confirm?
In the new version of npm (v7), by default, npm install will fail when it encounters conflicting peerDependencies. It was not like that before. Take a look here for more info about peer dependencies in npm v7. --legacy-peer-deps: ignore all peerDependencies when installing, in the style of npm version 4 through version 6.
We're using npm ci instead of npm install to ensure a clean slate during deployment. However, when we run it without any flags, we get the following error: Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
In the new version of npm (v7), by default, npm install
will fail when it encounters conflicting peerDependencies. It was not like that before.
Take a look here for more info about peer dependencies in npm v7.
The differences between the two are below -
--legacy-peer-deps
: ignore all peerDependencies when installing, in the style of npm version 4 through version 6.
--strict-peer-deps
: fail and abort the install process for any conflicting peerDependencies when encountered. By default, npm will only crash for peerDependencies conflicts caused by the direct dependencies of the root project.
--force
: will force npm to fetch remote resources even if a local copy exists on disk.
In the article npm 7 is now generally available!,
You have the option to retry with
--force
to bypass the conflict or--legacy-peer-deps
command to ignore peer dependencies entirely (this behavior is similar to versions 4-6).
I agree this sentence is not really clear, but "ignore peer dependencies entirely" does not sound good. Let's use a real example:
Here is a peer dependency error I met when I npm install
:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: mobile@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR! peer react@">=16.0.0" from @testing-library/[email protected]
npm ERR! node_modules/@testing-library/react-native
npm ERR! dev @testing-library/react-native@"7.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from [email protected]
npm ERR! node_modules/react-native
npm ERR! react-native@"https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz" from the root project
npm ERR! peer react-native@">=0.59" from @testing-library/[email protected]
npm ERR! node_modules/@testing-library/react-native
npm ERR! dev @testing-library/react-native@"7.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/me/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/me/.npm/_logs/2021-03-13T00_10_33_813Z-debug.log
npm ERR! code 1
npm ERR! path /Users/me/my-app
npm ERR! command failed
npm ERR! command sh -c sh ./bin/setup.sh
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/me/.npm/_logs/2021-03-13T00_10_33_860Z-debug.log
Below is the package-lock.json difference between --legacy-peer-deps
and --force
.
npm install --legacy-peer-deps
, it adds this in my package-lock.json:"node_modules/@unimodules/react-native-adapter": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz",
"integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==",
"dependencies": {
"invariant": "^2.2.4",
"lodash": "^4.5.0"
},
"peerDependencies": {
"react-native": "*",
"react-native-web": "~0.13.7"
}
},
...
"@unimodules/react-native-adapter": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz",
"integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==",
"requires": {
"invariant": "^2.2.4",
"lodash": "^4.5.0"
}
},
npm install --force
, instead, it adds"node_modules/expo/node_modules/@unimodules/react-native-adapter": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz",
"integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==",
"dependencies": {
"invariant": "^2.2.4",
"lodash": "^4.5.0"
},
"peerDependencies": {
"react-native": "*",
"react-native-web": "~0.13.7"
}
},
"node_modules/expo/node_modules/inline-style-prefixer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz",
"integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==",
"peer": true,
"dependencies": {
"css-in-js-utils": "^2.0.0"
}
},
"node_modules/expo/node_modules/react-native-web": {
"version": "0.13.18",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
"integrity": "sha512-WR/0ECAmwLQ2+2cL2Ur+0/swXFAtcSM0URoADJmG6D4MnY+wGc91JO8LoOTlgY0USBOY+qG/beRrjFa+RAuOiA==",
"peer": true,
"dependencies": {
"array-find-index": "^1.0.2",
"create-react-class": "^15.6.2",
"deep-assign": "^3.0.0",
"fbjs": "^1.0.0",
"hyphenate-style-name": "^1.0.3",
"inline-style-prefixer": "^5.1.0",
"normalize-css-color": "^1.0.2",
"prop-types": "^15.6.0",
"react-timer-mixin": "^0.13.4"
},
"peerDependencies": {
"react": ">=16.5.1",
"react-dom": ">=16.5.1"
}
},
...
"dependencies": {
"@unimodules/react-native-adapter": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz",
"integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==",
"requires": {
"invariant": "^2.2.4",
"lodash": "^4.5.0"
}
},
"inline-style-prefixer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz",
"integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==",
"peer": true,
"requires": {
"css-in-js-utils": "^2.0.0"
}
},
"react-native-web": {
"version": "0.13.18",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",
"integrity": "sha512-WR/0ECAmwLQ2+2cL2Ur+0/swXFAtcSM0URoADJmG6D4MnY+wGc91JO8LoOTlgY0USBOY+qG/beRrjFa+RAuOiA==",
"peer": true,
"requires": {
"array-find-index": "^1.0.2",
"create-react-class": "^15.6.2",
"deep-assign": "^3.0.0",
"fbjs": "^1.0.0",
"hyphenate-style-name": "^1.0.3",
"inline-style-prefixer": "^5.1.0",
"normalize-css-color": "^1.0.2",
"prop-types": "^15.6.0",
"react-timer-mixin": "^0.13.4"
}
}
}
},
As you see, npm install --force
still pins many dependency versions which is stricter.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With