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:
package.json file and package-lock.json before upgrade, run npm run servenode-modules folder and the package-lock.json, clear cache npm cache clean --force and run npm installA 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!
I found the answer(s). In this order:
1. Upgrade Vue to the specific version 3.2.26 or 3.2.41.
npm i vue@3.2.26
"devDependencies": {
...
"@vue/compiler-sfc": "npm:@vue/compiler-sfc@^3",
...
}
The first solution does not work anymore if you want to install Pinia, since Pinia requires at least Vue 3.3.0. Installing Vue and Vue compiler sfc pinning the exact version does not work. The compiler might not have been able to pick up the "@" symbol. Source
"dependencies":
{ ... },
"overrides":
{ "vue": "3" },
Hope this is of help!