Context
I am migrating a project from Vue 2 to Vue 3. I fixed all the breaking changes and syntax, the app worked. Before removing the vue compat mode, I had to do one more step: replace a Vue-2-only plugin with a similar Vue-3 plugin. In the process, I upgraded some packages, and now cannot run the app anymore.
Error
Running npm run serve causes this console 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.
I still use Vue-CLI and never install Vite. In the package.json, vue is upgraded to the latest version 3.3.4. I don't understand why there is an error about vitejs and vue >= 3.2.13. Below is the full error message:
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.<anonymous> (-----HIDE FULL PATH DUE TO WORK RELATED FILES---\MigratingToVue3\client\node_modules\vue-loader\dist\compiler.js:14:15)
at Module._compile (internal/modules/cjs/loader.js:1015:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (-----HIDE FULL PATH DUE TO WORK RELATED FILES---\MigratingToVue3\client\node_modules\vue-loader\dist\index.js:29:20)
at Module._compile (internal/modules/cjs/loader.js:1015:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ams-client@1.1.134 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ams-client@1.1.134 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Environment
I use Node v12.19.0, npm v6.14.8 in this project, no change.
This is my package.json file:
{
"name": "client",
"version": "1.1.134",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"prebuild": "npm version patch",
"build": "vue-cli-service build",
"serve-dev": "vue-cli-service serve --mode dev",
"serve-prod": "vue-cli-service serve --mode prod",
"build-dev": "vue-cli-service build --mode dev",
"build-prod": "vue-cli-service build --mode prod",
"postbuild": "node configure.js",
"lint": "vue-cli-service lint",
"build:nobump": "vue-cli-service build",
"deploy-dev": "cli-confirm \"Do you really want to deploy the application on DEV?\" && npm run build-dev && msdeploy --verb sync --source contentPath=dist --dest contentPath=---HIDE PATH DUE TO WORK---,ComputerName=---HIDE PATH DUE TO WORK---",
"deploy-prod": "cli-confirm \"Do you really want to deploy the application on PRODUCTION?\" && npm run build-prod && msdeploy --verb sync --source contentPath=dist --dest contentPath=---HIDE PATH DUE TO WORK---,ComputerName=---HIDE PATH DUE TO WORK---"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@vue/compat": "^3.3.4", <------ BEFORE UPGRADE: "^3.1.0" ------>
"axios": "^0.22.0",
"cli-confirm": "^1.0.1",
"core-js": "^3.32.0",
"d3": "^5.15.1",
"dexie": "^3.2.4",
"msdeploy": "^1.2.1",
"npm": "^7.24.2",
"sass": "^1.64.2",
"vue": "^3.3.4", <------ BEFORE UPGRADE: "^3.1.0" ------>
"vue-next": "0.0.1",
"vue-router": "^4.0.0",
"vue-swal": "^1.0.0",
"vue2-editor": "^2.10.2",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-plugin-vuex": "~5.0.8",
"@vue/cli-service": "~5.0.8",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^7.5.0",
"eslint-plugin-import": "^2.28.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^10.1.0",
"@vue/compiler-sfc": "^3.3.4"
}
}
What I tried
Without success:
- Copy-pasting the content of the
package.jsonfile andpackage-lock.jsonbefore upgrade, runnpm run serve - Deleting the
node-modulesfolder and thepackage-lock.json, clear cachenpm cache clean --forceand runnpm install - Restarting computer, turning off and turning on the computer
A similar question was asked, but none of the answers works for me.
My goal is just to get the app to work again like it did before all the upgrades. Any input would be greatly appreciated. Thank you so much!
