npm依存関係の解消

Question

前提

vue、firebaseを使ってwebサービスの開発中、

npm i

したら以下のエラーが

User@UserMacBook-Pro app-edit % npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vue/compiler-sfc@3.0.2
npm ERR! Found: vue@2.6.10
npm ERR! node_modules/vue
npm ERR!   vue@"2.6.10" from the root project
npm ERR!   peer vue@"2.x || 3.x" from @sentry/vue@6.12.0
npm ERR!   node_modules/@sentry/vue
npm ERR!     @sentry/vue@"^6.12.0" from the root project
npm ERR!   4 more (@vue/babel-preset-app, @vue/test-utils, element-ui, vue-jest)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"3.0.2" from @vue/compiler-sfc@3.0.2
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.8
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"^4.5.8" from the root project
npm ERR!     3 more (@vue/cli-plugin-babel, @vue/cli-plugin-router, @vue/cli-plugin-vuex)
npm ERR!   @vue/compiler-sfc@"^3.0.0-beta.15" from vue-codemod@0.0.4
npm ERR!   node_modules/vue-codemod
npm ERR!     vue-codemod@"^0.0.4" from @vue/cli@4.5.8
npm ERR!     node_modules/@vue/cli
npm ERR!       dev @vue/cli@"^4.5.8" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@3.0.2
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.0.2" from @vue/compiler-sfc@3.0.2
npm ERR!   node_modules/@vue/compiler-sfc
npm ERR!     peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.8
npm ERR!     node_modules/@vue/cli-service
npm ERR!       dev @vue/cli-service@"^4.5.8" from the root project
npm ERR!       3 more (@vue/cli-plugin-babel, @vue/cli-plugin-router, @vue/cli-plugin-vuex)
npm ERR!     @vue/compiler-sfc@"^3.0.0-beta.15" from vue-codemod@0.0.4
npm ERR!     node_modules/vue-codemod
npm ERR!       vue-codemod@"^0.0.4" from @vue/cli@4.5.8
npm ERR!       node_modules/@vue/cli
npm ERR!         dev @vue/cli@"^4.5.8" 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/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2022-10-31T14_31_30_167Z-debug-0.log

依存関係のエラーだとは思うのですが、以下の記事
https://teratail.com/questions/368923
のように、脆弱性によるものではないかと思い

npm audit

をすると以下の結果が」、

148 vulnerabilities (13 low, 47 moderate, 67 high, 21 critical)

hightとcriticalは直した方がいいと記事を読んだことがありますが、、、、、

的外れなことやってます？？

実現したいこと、知りたいこと

・エラーの意味を理解していないので、教えてほしい。
・上記のエラーを解消する。
・無事に'npm i'を完了させる。

補足情報（FW/ツールのバージョンなど）

{
  "name": "*****",
  "version": "0.0.1",
  "description": "*********",
  "author": "**************",
  "license": "None",
  "private": true,
  "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 --fix --ext .js,.vue src",
    "lint:ci": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint:ci && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },
  "dependencies": {
    "@sentry/tracing": "^6.12.0",
    "@sentry/vue": "^6.12.0",
    "apexcharts": "^3.20.0",
    "array-tree-filter": "^2.1.0",
    "axios": "0.18.1",
    "browserslist": "^4.21.3",
    "cors": "^2.8.5",
    "dayjs": "^1.8.34",
    "element-ui": "2.13.0",
    "encoding-japanese": "^1.0.30",
    "firebase": "^7.13.1",
    "html2pdf.js": "^0.9.2",
    "js-cookie": "2.2.0",
    "lodash": "^4.17.19",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "papaparse": "^5.2.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-apexcharts": "^1.6.0",
    "vue-clipboard2": "^0.3.1",
    "vue-i18n": "^8.22.4",
    "vue-mq": "^1.0.1",
    "vue-router": "3.0.6",
    "vue-tel-input": "^5.5.0",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/register": "7.0.0",
    "@sentry/webpack-plugin": "^1.17.1",
    "@vue/cli": "^4.5.8",
    "@vue/cli-plugin-babel": "^4.5.8",
    "@vue/cli-plugin-eslint": "^3.9.1",
    "@vue/cli-plugin-unit-jest": "3.6.3",
    "@vue/cli-service": "^4.5.8",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "^9.5.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "core-js": "^3.6.5",
    "eslint": "5.15.3",
    "eslint-plugin-vue": "5.2.2",
    "html-webpack-plugin": "3.2.0",
    "mockjs": "1.0.1-beta3",
    "node-sass": "^4.9.0",
    "runjs": "^4.3.2",
    "sass-loader": "^10.0.4",
    "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.2",
    "vue-template-compiler": "2.6.10"
  },
  "engines": {
    "node": ">=12.16.1",
    "npm": ">= 6.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "volta": {
    "node": "12.22.4"
  }
}

誰かお助けください。

Comments

[maisumakun]

いったん、package-lock.jsonを別な名前にするなどして、ゼロからインストールを行ってみたらどうなりますか？

[tima0314]

返信ありがとうがざいました。
package-lock.json再構築し、vue@2.7.13にアップグレードしたらエラー解消されました。
ありがとうがざいました！

Answer 1

返信ありがとうがざいました。
package-lock.json再構築し、vue@2.7.13にアップグレードしたらエラー解消されました。
ありがとうがざいました！

Answer 2

tima0314さんが利用しているVueのバージョンが2.6.10なのに対して、@vue/cli-serviceが内部的に利用している@vue/compiler-sfcが3.0.2であることを要求しているのでエラーがでています。

対策としては、@vue/cli-serviceがVue@2.6.10に対応しているバージョンまで下げる or Vueのバージョンを3.0.2に上げる等になります。（Vueのバージョンを上げることでこのエラーは解決するかもしれませんが、同じようなエラーが出る可能性はあります）