导入声明与 Vue 3.3 中“defineProps”的本地声明冲突

Question

node_modules今天更新（Vue 到 v3.3）后我开始收到这些错误。

使用的是 Vue 3.3、WebPack（不是 Vite）和 VS Code Volar。工程量巨大。

每个*.vue带有.<script setup lang="ts">​ import { defineProps, defineEmits } from 'vue'以前工作得很好，现在仍然可以编译并工作得很好。埃斯林特也顺利通过。

但现在 VS Code在每个文件中都会突出显示导入的defineProps和。defineEmits错误是：

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<...>;
}

现在每个*.vue文件在 VS Code 中都被标记为红色，这非常烦人。

知道在哪里寻找解决问题的方法吗？

Answer 1

这是因为“defineProps”与编译器宏冲突。删除导入。

如果构建不起作用，请确保package.json 中有“eslint-plugin-vue”版本8及更高版本并已安装。

添加

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

到.eslintrc.js文件的env部分。