3

I started getting these errors after updating node_modules (and Vue to v3.3) just today.

Vue 3.3, WebPack (not Vite), and VS Code Volar is in use. The project is huge.

Every *.vue file with <script setup lang="ts"> has import { defineProps, defineEmits } from 'vue'. It worked fine previously, it still compiles and works fine now. Eslint also passes successfully.

But now VS Code highlights imported defineProps and defineEmits in every file. The error is:

Import declaration conflicts with local declaration of 'defineProps'.ts(2440)
(alias) function defineProps<PropNames extends string = string>(props: PropNames[]): { [K in keyof Readonly<{ [key in PropNames]?: any; }>]: Readonly<{ [key in PropNames]?: any; }>[K]; } (+2 overloads)
import defineProps
const defineProps: {
    <PropNames extends string = string>(props: PropNames[]): { [K in keyof Readonly<{ [key in PropNames]?: any; }>]: Readonly<{ [key in PropNames]?: any; }>[K]; };
    <PP extends ComponentObjectPropsOptions<...> = ComponentObjectPropsOptions<...>>(props: PP): { [K in keyof Readonly<...>]: Readonly<...>[K]; };
    <TypeProps>(): DefineProps<...>;
}

Import declaration conflicts with local declaration of 'defineProps'.ts

Now every *.vue file is marked as red in VS Code which is very annoying.

Any idea where to look for to resolve the issue?

NicPWNs
  • 113
  • 10
Kasheftin
  • 7,509
  • 11
  • 41
  • 68
  • Since this occurs in IDE, and Volar is responsible for Vue syntax, I'd expect it to be its problem in the first place. Make sure it's the latest available version and consider specifying package versions in the question if this is not the case – Estus Flask May 17 '23 at 16:20

2 Answers2

6

It's because 'defineProps' conflics with compiler macros. Removes the import.

If the build does not work, make sure you have "eslint-plugin-vue" version 8 and above in the package.json and installed.

Add

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

to the env section of the .eslintrc.js file.

Orden
  • 589
  • 3
  • 13
2

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).

See this section in the docs, explaining how to define props in single file components (SFC)

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 import and the error should go away!

Also make sure that you are using the latest Volar Plugin for VS Code and use it's takeover mode as explained in the TypeScript section of the official docs.

wavedeck
  • 37
  • 1
  • 6