Project scenario:
Install third-party packages using npm or yarn.
Problem Description
If you mix npm and yarn commands, installation package conflicts will occur.
E:\WorkSpace\react\zhuangao_05\dome_01>npm i echarts echarts-for-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @jiaminghi/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@">=16.0.0" from @ant-design/[email protected]
npm ERR! node_modules/@ant-design/cssinjs
npm ERR! @ant-design/cssinjs@"^1.3.0" from [email protected]
npm ERR! node_modules/antd
npm ERR! antd@"^5.0.4" from the root project
npm ERR! peer react@">=16.0.0" from @ant-design/[email protected]
npm ERR! node_modules/@ant-design/icons
npm ERR! @ant-design/icons@"^4.7.0" from [email protected]
npm ERR! node_modules/antd
npm ERR! antd@"^5.0.4" from the root project
npm ERR! @ant-design/icons@"^4.8.0" from the root project
npm ERR! 53 more (@ant-design/react-slick, @rc-component/portal, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @jiaminghi/[email protected]
npm ERR! node_modules/@jiaminghi/data-view-react
npm ERR! @jiaminghi/data-view-react@"^1.2.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0" from @jiaminghi/[email protected]
npm ERR! node_modules/@jiaminghi/data-view-react
npm ERR! @jiaminghi/data-view-react@"^1.2.5" 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 C:\Users\86158\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\86158\AppData\Local\npm-cache\_logs\2023-01-09T06_13_18_485Z-debug-0.log
Cause Analysis:
Putting
yarn.lockthe andpackage.lockfiles together can sometimes become difficult, as there is a risk of getting out of sync. The
yarn installinstall generated filesyarn.lockare far behind in time, causing the package version of to be lower than the package version of . Because the version of the package defined in the form of ?xxx is inconsistent in different periods of time. Install @babel/preset-env version: "7.5.5", "^7.4.5", the actual installed version is "7.5.5". Inconsistent with installing packages Yarn and npm are interchangeable. As long as you use the same one every time, there is no difference between them. They have different installation directories, which is why they cannot be used together. Yarn will install a package, npm can't find it. npm will install a package, yarn can't find itnpm installpackage-lock.jsonyarn.lockpackage-lock.json
yarn
npmyarn
solution:
1、npm i xxx --legacy-peer-deps
Use
npm i xxx --legacy-peer-depsthe command to install dependencies!
Why? effect?
The npm install xxxx --legacy-peer-deps command is not so much telling npm what to do, it is better to tell npm what not to do.
Legacy means: legacy/(software or hardware) is obsolete but difficult to replace because of its wide range of use; and the npm install xxxx --legacy-peer-deps command is used to bypass the automatic installation of dependencies in peerDependency; it tells npm to ignore The various dependent modules introduced in the project depend on the same but different versions, and continue the installation operation in the way of npm v3-v6.
So in fact, this command does not really resolve the conflict, but ignores the conflict and performs the download operation in an "outdated" (v3-v6) way.
2. Delete all files related to npm installation dependencies
After deleting, re-npm i to install the required third-party packages
To prevent conflicting files, use consistent commands to install third-party libraries.