DEV Community

Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Edited on

14 2 1

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
+   }
}
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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay