[Solved] Vue 3 Script Setup ESLint Error: ‘defineProps‘ is not defined

Solution: when using Vue 3 script setup, eslint reports the error ‘defineprops’ is not defined

Vue 3’s script setup syntax introduces compiler macros of defineprops, definemits, defineexpose, withdefaults. However, in some cases, eslint will report an error. The above compiler macro functions are not defined.

This article will introduce two solutions to solve this problem (assuming that your project is initialized with Vue CLI).

Step 1. Check the version of eslint-plugin-Vue 

npm list eslint-plugin-vue

If the version is in V8 Above 0.0, jump to step 2, otherwise go directly to the content of step 3.

Step 2. Version is V8.0.0+

Open eslintrc.JS file and modify it as follows:

  env: {
    node: true,
    // The Follow config only works with eslint-plugin-vue v8.0.0+
    "vue/setup-compiler-macros": true,
  },

Step 3. Version is V8 Below 0.0

Open eslintrc.JS file and modify it as follows:

  // The Follow configs works with eslint-plugin-vue v7.x.x
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },

If your version of  eslint-plugin-vue is under V8, I don’t recommended you to upgrade the version，especially you had used a lot of ts dependency.

Read More: