Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

1.4K
Vistas
Vue 3: `defineProps` are referencing locally declared variables

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?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

This warning is intended to prevent this particular usage (from the eslint(vue/valid-define-props) docs):

<script setup>
  /* ✗ BAD */
  const def = { msg: String }
  defineProps(def)
</script>

If you actually tried to compile that <script setup> block in a build, the compiler emits this error message that clarifies the reasoning a bit:

defineProps() in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.

However, importing the validator from a module should actually be fine because there's no concern of hoisting local variables here. In fact, it compiles without error (see the JS tab in the SFC playground).

So I believe this is a false positive that could be ignored with a comment:

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

const props = defineProps({
  markers: {
    type: [Array, Object],            👇
    validator: validateMarkers, // eslint-disable-line vue/valid-define-props
  }
})
</script>
over 4 years ago · Santiago Trujillo Denunciar

0

@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>
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda