NPM: npm peer dependency conflict - vue.js

Question

I download a project and it has no package-lock.json file.When I run npm install , there is conflict. The error message:
root#fb3391c63c7f:/app/avatar/avatar-h5# npm install --registry=https://registry.npm.taobao.org
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: avatar#3.2.0
npm ERR! Found: vue#2.6.10
npm ERR! node_modules/vue
npm ERR! vue#"2.6.10" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"3.0.5" from #vue/compiler-sfc#3.0.5
npm ERR! node_modules/#vue/compiler-sfc
npm ERR! peer #vue/compiler-sfc#"^3.0.0-beta.14" from #vue/cli-service#4.5.10
npm ERR! node_modules/#vue/cli-service
npm ERR! peer #vue/cli-service#"^3.0.0 || ^4.0.0-0" from #vue/cli-plugin-babel#4.4.4
npm ERR! node_modules/#vue/cli-plugin-babel
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 /root/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-01-18T21_53_07_044Z-debug.log
I read a lot docs and figure out that #vue/cli-plugin-babel#4.4.4 will install lastest #vue/cli-service#4.5.10 .
How can I install it compatible with vue#2.6.10
package.json file
{
"name": "avatar",
"version": "3.2.0",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"new": "plop"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"repository": {
"type": "git",
"url": "https://gitee.com/fairyfleet/avatar.git"
},
"dependencies": {
"#riophae/vue-treeselect": "0.4.0",
"axios": "0.18.1",
"clipboard": "2.0.4",
"core-js": "3.6.5",
"echarts": "4.2.1",
"element-ui": "2.13.2",
"file-saver": "2.0.1",
"js-beautify": "1.10.2",
"fuse.js": "3.4.4",
"js-cookie": "2.2.0",
"jsencrypt": "3.0.0-rc.1",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"screenfull": "4.2.0",
"sortablejs": "1.8.4",
"vue": "2.6.10",
"vue-count-to": "1.0.13",
"quill": "1.3.7",
"vue-cropper": "0.4.9",
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",
"vuedraggable": "2.20.0",
"vuex": "3.1.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "4.4.4",
"#vue/cli-plugin-eslint": "4.4.4",
"#vue/cli-plugin-unit-jest": "4.4.4",
"#vue/cli-service": "4.4.4",
"#vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "9.5.1",
"babel-eslint": "10.1.0",
"babel-jest": "23.6.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "2.4.2",
"chokidar": "2.1.5",
"connect": "3.6.6",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
"husky": "1.3.1",
"lint-staged": "8.1.5",
"mockjs": "1.0.1-beta3",
"plop": "2.3.0",
"runjs": "4.3.2",
"node-sass": "4.14.1",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "0.7.2",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0",
"vue-template-compiler": "2.6.10"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

Answer 1

Same issue here. It occurs only on newer versions of npm. You can temporarily fix it by falling back on the LTS 14.15 version of NodeJS.
On Linux/MacOS:
nvm use --lts
Or else:
npm install -g npm#6.14.8

Answer 2

What fixed this issue for me was simply removing the node_modules folder and then pasting the package versions in the package json file and running npm install.

Answer 3

To add to Chaim Zonnenberg
I encountered this error when working on a NestJS project on macOS with Node (16.11.1) and npm (8.0.0).
When I run the command npm install I get the error below:
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: admin-gateway#0.0.1
npm ERR! Found: rxjs#7.3.0
npm ERR! node_modules/rxjs
npm ERR! rxjs#"^6.0.0" from the root project
npm ERR! peer rxjs#"^6.0.0 || ^7.0.0" from #nestjs/axios#0.0.1
npm ERR! node_modules/#nestjs/axios
npm ERR! #nestjs/axios#"^0.0.1" from the root project
npm ERR! 4 more (#nestjs/common, #nestjs/core, #nestjs/config, #nestjs/microservices)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! elastic-apm-nest#"0.0.7" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: rxjs#6.6.7
npm ERR! node_modules/rxjs
npm ERR! peer rxjs#"^6.0.0" from elastic-apm-nest#0.0.7
npm ERR! node_modules/elastic-apm-nest
npm ERR! elastic-apm-nest#"0.0.7" 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.
Here's how I fixed it:
The issue was that I was running a newer version of Node (16.11.1) which was not the long term support (lts) version.
First, I removed the node package that was present on my macOS using the homebrew command:
brew uninstall --ignore-dependencies node
And then I installed nvm using homebrew:
brew install nvm
Next, I created the NVM's working directory since it didn't exist:
mkdir ~/.nvm
Next, I added the following to the ~/.zshrc file or your desired shell
configuration file. For me the ~/.zshrc file did not exist so I created it using the command touch ~/.zshrc, and then opened it using the command:
nano ~/.zshrc
and added the following below:
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion
Save the file using the key combinations Ctrl + X and then Y and the ENTER
Next, open a new terminal, and install Node LTS version using the command:
nvm install --lts
If you already have the Node LTS version installed then run the command:
nvm use --lts
Confirm your Node and npm versions using the command:
node --version
npm --version
Finally, run the npm install command again, and this time everything will go fine.
That's all

Answer 4

npm install -g npm#6.14.8
this also works on windows.