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
Oldest comments (5)
You're life saver bro
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
"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: