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

During my setup Vue and Vite in my project, I came across a very common problem: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

I have solved this isseu for my project and let me tell you that this error is not new and very obivous error that any developer can face.

So I decide to share my experince to other developers also, here are the ways to solve it based on my experience and research, so if you are also facing this problem, then this guide will be helpful for you.

Cause of the problem

Let's first understand why this issue occurs, this problem occurs when Vite's Vue plugin requires vue (at least version 3.2.13) or @vue/compiler-sfc in your project's dependency tree.

So If the correct version is not present in your project or the correct dependency is not installed for some reason, then this error occurs, so it is very important to check the correct version first.

Possible Solution

1. Install or update Vue and @vue/compiler-sfc

The first step and very importent is to make sure you have the correct version of Vue and @vue/compiler-sfc dependency.

To check this you can use the following commands:

npm install vue@^3.2.13
npm install @vue/compiler-sfc --save-dev

Using above command we installed both these packages so that the plugin gets the correct dependencies to work as required.

2. Check the version in package.json

In your package.json file, make sure that the version of vue is 3.2.13 or above.

{
"dependencies": {
"vue": "^3.2.13"

},
"devDependencies": {
"@vue/compiler-sfc": "^3.2.13"

}
}

I found out that sometimes the error occurs due to older versions. So, it is always beneficial to check the package.json.

3. Reinstall the Vite plugin

If the issue still persists, try reinstalling the Vite plugin:

npm install @vitejs/plugin-vue --save-dev

In my case, reinstalling the Vite plugin helped fix the error.

4. Clear Node modules and cache

In some cases, the cache issue can also occur. Follow the following steps to clear the cache:

rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install

In this way, all modules will be installed from a clean slate and the issue caused by the old configuration may be resolved.

5. Sync between Vite and Vue CLI

For some developers, using Vite with Vue CLI can become a hassle. So make sure you have the right setup in your vite.config.js. A basic configuration could be like this:

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [vue()]
});

Updating this file got me going in the right direction, and didn't get the error.

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

Possible Solution

Read Similar Articles