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

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

Links

• https://dev.to/algil/comment/1igom
• https://dev.to/imomaliev/creating-vite-vue-ts-template-project-configs-improvements-3617
• https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
• https://dev.to/imomaliev/comment/1ihh5

Comments

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

[Sardorbek Imomaliev]

Thanks, updated the post

[Kingkor Roy Tirtho]

You're life saver bro

[Zero Zhang]

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

[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",
+   }
}