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

Question

I'm working with the berry version of yarn with modules federation and vue3.
When I run these commands to create the base of the project:

mkdir vue-error
yarn set version stable
yarn plugin import workspace-tools
yarn init -pw
cd packages
npx create-mf-app # body
yarn
yarn workspace body add single-spa-vue
cd body
yarn start

I get the following error:

[webpack-cli] Failed to load '/Users/test/Development/trash/vue-error/packages/body/webpack.config.js' config
[webpack-cli] Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/Users/jcuzmar/Development/trash/vue-error/.yarn/__virtual__/vue-loader-virtual-8ff7836f4c/0/cache/vue-loader-npm-16.8.3-e05f7daca3-7c0566847b.zip/node_modules/vue-loader/dist/compiler.js:14:15)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.external_module_.Module._load (/Users/jcuzmar/Development/trash/vue-error/.pnp.cjs:17959:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/jcuzmar/Development/trash/vue-error/.yarn/__virtual__/vue-loader-virtual-8ff7836f4c/0/cache/vue-loader-npm-16.8.3-e05f7daca3-7c0566847b.zip/node_modules/vue-loader/dist/index.js:8:20)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

I tried adding:

packageExtensions:
  "@vitejs/plugin-vue@*":
    peerDependencies:
      'vue': '*'
      '@vue/compiler-sfc': '*'
      webpack: '*'

without success.

Vigor

Answer 1

Upgrading vue to the latest available version solved the issue for me :)

If you’re using Yarn:

yarn add [email protected]

If you’re using NPM:

npm i [email protected]

Any version equal or above 3.2.13 should take care of it.

Prosser

I'm using vue 2, upgrading to vue 3 would break everything – Bijugate

I'm using vue 3.0.0 and using the above npm i command fix the problem with me. So the answer still stands – Woodwind

For others, it may require pinning to 3.2.26, if you are on node 12. – Indopacific

@Bijugate OP mentioned he's using Vue3.. If you're using vue2 and get this error, consider open a new SO question – Bunting

@C.Bess That was my issue! Do you know why the error message says nothing about vue being incompatible with the node version? – Nomination

Answer 2

Another point is to check your node version and if any of your VUE based plugins or dependencies require a specific node version. Fixed a VUE build for me.

Phlegmy

Answer 3

Updating my node.js version helped resolve this issue.

I recommend installing node version manager to allow you to very easily swap between node versions.

Chiffon

Answer 4

"@vue/compat": "^3.2.29", "vue": "^3.2.29", "@vue/compiler-sfc": "^3.2.29",

incase if you face this issue when you migrating. please

do

npm uninstall @vue/compiler-sfc

then

npm install @vue/[email protected]

it get fix.

Legend

Answer 5

If you’re using NPM:

npm i [email protected]

Toscanini