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.

score 13 · Answer 1 · answered Dec 25 '21 at 21:52

13

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

If you’re using Yarn:

yarn add vue@3.2.26

If you’re using NPM:

npm i vue@3.2.26

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

answered Dec 25 '21 at 21:52

Rodrigo D'Agostino

671
5
22

4

I'm using vue 2, upgrading to vue 3 would break everything – Shardj May 06 '22 at 09:36
I'm using vue 3.0.0 and using the above npm i command fix the problem with me. So the answer still stands – leipzy Jul 03 '22 at 12:51
For others, it may require pinning to `3.2.26`, if you are on node 12. – C. Bess Jul 21 '23 at 01:49
@Shardj OP mentioned he's using Vue3.. If you're using vue2 and get this error, consider open a new SO question – Tzahi Leh Aug 24 '23 at 13:54

score 2 · Answer 2 · answered Jul 13 '23 at 10:42

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.

answered Jul 13 '23 at 10:42

Simitri69

96
3

score -1 · Answer 3 · answered Aug 22 '23 at 09:05

-1

If you’re using NPM:

npm i vue@3.2.26

answered Aug 22 '23 at 09:05

aishwarya rh

1

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

3 Answers3

Linked