Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

286
Views
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?

about 4 years ago ยท Juan Pablo Isaza
2 answers
Answer question

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>
about 4 years ago ยท Juan Pablo Isaza Report

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>
about 4 years ago ยท Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
ยฉ 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!