Npm dependency conflict

Question

I am working on a project with Vue. I run Vue Cli and I added the Typescript plugin. I have several vulnerabilities. When I run npm audit fix it can't resolve the dependency conflict:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @typescript-eslint/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^6.7.2" from the root project
npm ERR!   peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"^4.33.0" from the root project
npm ERR!     peer @typescript-eslint/eslint-plugin@"^4.4.0" from @vue/[email protected]
npm ERR!     node_modules/@vue/eslint-config-typescript
npm ERR!       dev @vue/eslint-config-typescript@"^7.0.0" from the root project
npm ERR!   9 more (@typescript-eslint/experimental-utils, eslint-utils, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   dev @typescript-eslint/eslint-plugin@"^4.33.0" from the root project
npm ERR!   peer @typescript-eslint/eslint-plugin@"^4.4.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/eslint-config-typescript
npm ERR!     dev @vue/eslint-config-typescript@"^7.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"^4.33.0" from the root project
npm ERR!     peer @typescript-eslint/eslint-plugin@"^4.4.0" from @vue/[email protected]
npm ERR!     node_modules/@vue/eslint-config-typescript
npm ERR!       dev @vue/eslint-config-typescript@"^7.0.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 /home/pau/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/pau/.npm/_logs/2021-10-29T19_09_55_798Z-debug.log

I am using node version v14.17.4, npm version 8.0.0.

Here is my package.json. I configured the majority of the project using Vue Cli, currently on version @vue/cli 4.5.14.

{
  "name": "uama.groundframework.frontend",
  "version": "0.1.0",
  "private": true,
  "description": "## Project setup ``` npm install ```",
  "author": "",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && npm run copy_web-inf",
    "lint": "vue-cli-service lint",
    "capacitor:build": "vue-cli-service capacitor:build",
    "capacitor:serve": "vue-cli-service capacitor:serve",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
    "copy_web-inf": "ncp ./../../WEB-INF ./../../Servlets_Sockets/src/main/webapp/WEB-INF",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps && npx cap update android",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@arcgis/core": "^4.20.2",
    "@capacitor/android": "^2.0.0",
    "@capacitor/cli": "^2.0.0",
    "@capacitor/core": "^2.0.0",
    "@capacitor/ios": "^2.0.0",
    "@types/arcgis-js-api": "^4.20.1",
    "axios": "^0.21.1",
    "core-js": "^3.17.0",
    "hammerjs": "^2.0.8",
    "mathjs": "^9.4.4",
    "ncp": "^2.0.0",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.5.2",
    "vuetify": "^2.5.8",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.4",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "dotenv-webpack": "^7.0.3",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.38.2",
    "sass-loader": "^8.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-capacitor": "~2.0.1",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "keywords": [],
  "license": "ISC"
}

Shady

Answer 1

Your package.json has a mix of dev dependencies with versions that start with ~ and ones that start with ^. That's probably because some dev dependencies were installed with older versions of npm that defaulted to ~ which is more conservative than ^. As a first step, change the 8 ~ versions to ^, remove node_modules and (if it exists) package-lock.json and run npm install again. I tested this locally and it didn't reduce the number of vulnerabilities reported by npm audit but it did reduce the number of outdated packages which is a step in the right direction.

Let's simplify things by only looking at the audit results for your production dependencies and ignoring (at least for the moment) issues in your dev dependencies. npm audit --only=prod reports only 5 issues, all moderate. Running npm audit --only=prod --force fix updates @capacitor/cli from 2.x to 3.x. That's a breaking change so you'll want to test it, but if that works for you, congratulations because npm audit --only=prod reports no vulnerabilities.

At this point, you could possibly choose not to worry much about the other issues reported by npm audit. However if you wanted to fix them, here is the potentially tedious/arduous path I'd recommend:

• Do a manual audit of all of your dev dependencies to make sure you aren't including things you don't need. Maybe you have things that are installed that you aren't using. Uninstall them. Maybe you have things installed that are nice-to-have but you don't really need. Consider uninstalling them too.
• Run npm outdated to see what could be manually updated via a breaking change. Try doing those updates.

Invitation

@RichyRoo The person asking the questions would seem to disagree given that they accepted it as an answer. It absolutely does answer the question. (Well, to the extent that there is a question. The "question" describes a problem but doesn't actually ask a question. This answer describes what one can do to fix the issue.) – Invitation

Answer 2

To solve this issue simply downgrade the version which is suggested by npm.

For eg.

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/eslint npm ERR! peer eslint@">= 4.12.1" from [email protected] npm ERR! node_modules/babel-eslint npm ERR! dev babel-eslint@"^10.1.0" from the root project npm ERR! peer eslint@">=5.0.0" from [email protected] npm ERR! node_modules/vue-eslint-parser npm ERR! vue-eslint-parser@"^7.0.0" from [email protected] npm ERR! node_modules/eslint-plugin-vue npm ERR! dev eslint-plugin-vue@"^6.2.2" from the root project npm ERR! 1 more (the root project) npm ERR!

npm ERR! Could not resolve dependency:

npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin- [email protected]

npm ERR! node_modules/@vue/cli-plugin-eslint npm ERR! dev @vue/cli-plugin-eslint@"^4.5.15" from the root project

Here it is saying

Could not resolve dependency:

npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-

[email protected]

So please update eslint version between >= 1.6.0 < 7.0.0 in package.json file and then run command npm install If you get any error related to resolving dependency. Please follow this

Thank you.

Nader