node.js – While running vuejs it throws error @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree

I have web application which is build in VueJs, Express and NodeJs. The Node version is 12.22.9 and npm version is 8.3.1. I install it corectly but while build in vue files it throw an error.

ERROR Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

The complete Error

ERROR Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree. Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree. at Object. (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\node_modules\vue-loader\dist\compiler.js:14:15) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\node_modules\vue-loader\dist\index.js:29:20) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\config\base.js:154:16 at C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:268:40 at Array.forEach () at Service.resolveChainableWebpackConfig (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:268:26) at Service.resolveWebpackConfig (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:272:48) at PluginAPI.resolveWebpackConfig (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25) at serve (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\commands\serve.js:79:31) at Service.run (C:\Users\nitin\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js:262:12) at processTicksAndRejections (internal/process/task_queues.js:97:5)

I also tried npm install under project directory. the package.json file looks like :

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve --mode development"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.0",
    "axios": "^1.3.6",
    "core-js": "^3.8.3",
    "vee-validate": "^4.9.1",
    "vue": "^3.2.26",
    "vue-router": "^4.0.3",
    "vuetify": "^3.1.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/valid-v-slot": [
        "error",
        {
          "allowModifiers": true
        }
      ]
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

I tried to install vue and its necessary all package, but still same issue happens.
Also tried all solutions from this link

Read more here: Source link