Vue 3: `defineProps` are referencing locally declared variables

Question

Why I get warning error message:

defineProps are referencing locally declared variables. eslint(vue/valid-define-props)

when I use custom validator in props with SFC <script setup> mode:

<script setup>
import { validateMarkers } from "./hooks"
import { defineProps } from 'vue'

const props = defineProps({
  markers: {
    type: [Array, Object],
    validator: validateMarkers
  }
})
</script>

My custom validator:

export const validateMarkers = (markers) =>
    isNotEmpty(markers)
        ? isObject(markers)
            ? markerValidator(markers)
            : isNotEmptyArray(markers)
            ? markers.every((marker) => markerValidator(marker))
            : error('Undefined type of prop marker')
        : null

How I can fix this warning?

Answer 1

@tony19's answer correctly answers OP question and in later versions of eslint and Vue, you don't get that warning for imported bindings.

But if you still get a warning or an error, here is how to fix it!

First, we have to understand that a component can have 2 scopes:

Setup scope:

<script setup>
// Setup scope
</script>

Module scope:

<script>
// Module scope
</script>

defineProps should not reference local variables declared in setup scope

Because defineProps and defineEmits will be hoisted out of setup into module scope

So the code below will not work:

<script setup>
  const sizes = ['sm', 'md']

  const props = defineProps({
    size: {
      type: String,
      validator: val => sizes.includes(val) // <= Can't reference `sizes`
    }
  })
</script>

How to fix the code above?

Reference variables that are in the module scope!

Solution 1. Imported bindings are in the local scope:

<script setup>
import { sizes } from './sizes' // <= import it

const props = defineProps({
  size: {
    type: String,
    validator: val => sizes.includes(val) // <= use it
  }
})
</script>

Solution 2. Variables declared in module scope (not script setup):

<script setup>
const props = defineProps({
  size: {
    type: String,
    validator: val => sizes.includes(val) // <= sizes from module scope
  }
})
</script>

<script>
const sizes = ['sm', 'md'] // <= sizes can be accessed in setup scope

export default {}
</script>