DEV Community

Cover image for TIL: 2021-10-04 - Fix script setup defineProps is not defined
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on

TIL: 2021-10-04 - Fix script setup defineProps is not defined

Fix defineProps is not defined

Problem

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!

Solution

Add defineProps to globals in eslint. From docs:

module.exports = {
+   globals: {
+     defineProps: "readonly",
+   }
}
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

Fix 'props' is assigned a value but never used @typescript-eslint/no-unused-vars

Problem

This is a continuation of script setup syntax usage. eslint thinks that variables like props, emits etc. are not used, but actually they are.

Solution

Add vue/script-setup-uses-vars rule to eslint.

ESLint no-unused-vars rule does not detect variables in <script setup> used in <template>. This rule will find variables in <script setup> used in <template> and mark them as used.

module.exports = {
  // Use the rule set.
  extends: ['plugin:vue/base'],
  rules: {
    // Enable vue/script-setup-uses-vars rule
+     'vue/script-setup-uses-vars': 'error',
  }
}
Enter fullscreen mode Exit fullscreen mode

Links

Discussion (1)

Collapse
krtirtho profile image
Kingkor Roy Tirtho

You're life saver bro