Blog

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

Context

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

Resources

Tags: