Import declaration conflicts with local declaration of 'defineProps' in Vue 3.3 – Vue.js

"vue/setup-compiler-macros": true,

The Problem:

In Vue 3.3, after updating node_modules, users encounter conflicts between imported and locally declared defineProps in .vue files. Despite the application compiling and functioning correctly, VS Code highlights the imported defineProps with the error Import declaration conflicts with local declaration of 'defineProps'. This issue arises when using Vue 3.3, Webpack, and VS Code Volar in large projects.

The Solutions:

Solution 1: Remove the import

Remove the import of defineProps and defineEmits from vue. If the build fails, ensure that:

• eslint-plugin-vue version 8 or higher is installed and specified in package.json.
• The .eslintrc.js file includes the following entry in the env section:

"vue/setup-compiler-macros": true,

Solution 2: Remove the explicit import

You don’t need to import defineProps explicitly because it is a compiler macro and is automatically available to you in <script type="setup"> (using the composition API).

Because you’re importing it in your code, you’re essentially doing it twice behind the scenes, which results in the error you’re seeing.

Remove the following import statement from your *.vue file:

import { defineProps, defineEmits } from 'vue';

Also, make sure you’re using the latest Volar plugin for VS Code and use its takeover mode as explained in the official docs.