Story
In one of my vue-ts
series' article, I was asked how to resolve this issue
How have you resolve this console warning (on npm run dev)?
[@vue/compiler-sfc]definePropsis a compiler macro and no longer needs to be imported.
But if I don't import defineProps in HelloWorld.vue file, the next line is underline in red:
defineProps<{ msg: string }>()
With this message:
'defineProps' is not defined.eslint(no-undef)
Thanks!
Question
How to fix ESLint error defineProps' is not defined. eslint(no-undef)
?
Answer
Add 'vue/setup-compiler-macros': true
to env
in eslint
. From docs:
module.exports = {
+ env: {
+ 'vue/setup-compiler-macros': true
+ }
}
Basically in newer vue versions with script setup
syntax defineProps
is no longer needs to be imported because it is a compliler macro
as it states in quote above. So the solution was just to configure eslint
to not warn about defineProps
Top comments (5)
Thanks for the hints! I stumble upon your post while searching able a good fix for
defineProps
.I guess docs and solution has been updating while writing your post: eslint.vuejs.org/user-guide/#compi...
Thanks, updated the post
You're life saver bro
"Environment key "vue/setup-compiler-macros" is unknown" in my project
You are probably using older version of vue. Try different fix
Add
defineProps
toglobals
ineslint
. From docs: