DEV Community

Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Edited on

TIL: ESLint | Fix "'defineProps' is not defined."

#todayilearned #vue #eslint

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
+   }
}
Enter fullscreen mode Exit fullscreen mode

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

Links

Oldest comments (5)

Collapse
 
krtirtho profile image
Kingkor Roy Tirtho •

You're life saver bro

Collapse
 
zerdaris profile image
Zerdaris •

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

Collapse
 
imomaliev profile image
Sardorbek Imomaliev •

Thanks, updated the post

Collapse
 
zhangyao719 profile image
Zero Zhang •

"Environment key "vue/setup-compiler-macros" is unknown" in my project

Collapse
 
imomaliev profile image
Sardorbek Imomaliev •

You are probably using older version of vue. Try different fix

Add defineProps to globals in eslint. From docs:

module.exports = {
+   globals: {
+     defineProps: "readonly",
+   }
}
Enter fullscreen mode Exit fullscreen mode