Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.4K
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda