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

Top comments (5)

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
 
krtirtho profile image
Kingkor Roy Tirtho •

You're life saver bro

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

Read next

hunzombi profile image

Vue's Virtual DOM

hunzombi -

irenejpopova profile image

Blockchain with Vue, Python & Flask

Irena Popova 👩🏻‍💻 -

forthegeeks profile image

Understanding Vue.js Slots: A Toddler Analogy

Manjunath Shenoy -

oneminch profile image

How to Register Custom Directives in Nuxt 3

Dawit -