Dependency Conflict in Vue.js Project: vue-tel-input and vue Version (2.6.14) Compatibility

Question

I'm encountering a dependency conflict in my Vue.js project when attempting to install the vue-tel-input package. I've done some research on the compatibility of these versions but I'm still facing issues. I hope someone can help me resolve this.

Here is my package.json

           {
      "private": true,
      "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "lint": "eslint --fix --ext .js,.vue resources/js"
      },
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.3.0",
        "@fortawesome/free-brands-svg-icons": "^5.15.4",
        "@fortawesome/free-regular-svg-icons": "^5.15.4",
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/vue-fontawesome": "^2.0.10",
        "admin-lte": "^3.2.0",
        "axios": "^0.21.3",
        "bootstrap": "^4.6.2",
        "echarts": "^5.4.1",
        "html2pdf.js": "^0.10.0",
        "jquery": "^3.6.4",
        "js-cookie": "^2.2.1",
        "moment": "^2.29.4",
        "popper.js": "^1.12",
        "sweetalert2": "^8.19.1",
        "v-clipboard": "^2.2.3",
        "v-tooltip": "^2.1.3",
        "vform": "^2.1.2",
        "vue": "^2.6.14",
        "vue-barcode": "^1.3.0",
        "vue-echarts": "^6.5.4",
        "vue-final-modal": "^2.4.3",
        "vue-html-to-paper": "^1.4.4",
        "vue-i18n": "^8.28.2",
        "vue-js-toggle-button": "^1.3.3",
        "vue-lang-code-flags": "github:itsrafsanjani/vue-lang-code-flags",
        "vue-meta": "^2.4.0",
        "vue-mj-daterangepicker": "^0.1.11",
        "vue-moment": "^4.1.0",
        "vue-page-transition": "^0.2.2",
        "vue-router": "^3.6.5",
        "vue-select": "^3.20.2",
        "vue-tel-input": "^5.6.2",
        "vue2-daterange-picker": "^0.6.8",
        "vue2-teleport": "^1.0.1",
        "vuex": "^3.6.2",
        "vuex-router-sync": "^5.0.0"
      },
      "devDependencies": {
        "@babel/core": "^7.21.3",
        "@babel/eslint-parser": "^7.21.3",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-env": "^7.20.2",
        "@vue/composition-api": "^1.7.1",
        "cross-env": "^7.0.3",
        "eslint": "^7.32.0",
        "eslint-config-standard": "^16.0.3",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^4.3.1",
        "eslint-plugin-standard": "^4.1.0",
        "eslint-plugin-vue": "^7.20.0",
        "install-peers": "^1.0.4",
        "laravel-mix": "^5.0.9",
        "laravel-mix-versionhash": "^1.1.7",
        "resolve-url-loader": "^3.1.5",
        "sass": "^1.59.3",
        "sass-loader": "^10.4.1",
        "vue-masonry-css": "^1.0.3",
        "vue-template-compiler": "^2.6.14",
        "webpack-bundle-analyzer": "^3.9.0",
        "volar-service-vetur": "latest"
      }
    }

Error Details:

When I run npm install, I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.14" from the root project
npm ERR!   peer vue@"~2" from @fortawesome/vue-fontawesome@2.0.10
npm ERR!   node_modules/@fortawesome/vue-fontawesome
npm ERR!     @fortawesome/vue-fontawesome@"^2.0.10" from the root project
npm ERR!   8 more (@vue/composition-api, vform, vue-echarts, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! vue-tel-input@"^5.6.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@2.7.16
npm ERR! node_modules/vue
npm ERR!   peer vue@"^2.7.10" from vue-tel-input@5.15.0
npm ERR!   node_modules/vue-tel-input
npm ERR!     vue-tel-input@"^5.6.2" from the root project

I have tried using npm install --legacy-peer-deps and npm install --force, but I am still unable to resolve this dependency conflict.

Question:

Can anyone help me identify which version of vue-tel-input is compatible with vue@2.6.14? Alternatively, is there a better way to resolve this dependency conflic t without upgrading vue to 2.7.x?

Thank you in advance for your help!

Dependency Conflict in Vue.js Project: vue-tel-input and vue Version (2.6.14) Compatibility

Answers (1)

Related Questions