typescriptvue.jsnpmauditnpm-vulnerabilities

Npm dependency conflict

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/eslint-plugin@4.33.0
npm ERR! Found: eslint@6.8.0
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/eslint-plugin@4.33.0
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/eslint-config-typescript@7.0.0
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/eslint-plugin@4.33.0
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/eslint-config-typescript@7.0.0
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: eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/eslint-plugin@4.33.0
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/eslint-config-typescript@7.0.0
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"
}
Solution

  • 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: