Vue 3: `defineProps` allows components to locally reference declared variables

Question

Vue 3: `defineProps` allows components to locally reference declared variables

Why am I receiving a warning error message:

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

whenever I utilize a custom validator in props within an SFC <script setup> mode:

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

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

This is 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

What steps can I take to resolve this warning?

javascript vue.js eslint vuejs3 vue-sfc

Answer 1

Answer №1

When using eslint and Vue, the warning for imported bindings has been resolved in newer versions.

If you still encounter a warning or error, here's how to address it!

To clarify, a component can have two scopes:

Setup scope:

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

Module scope:

<script>
// Module scope
</script>

defineProps should not reference local variables declared in setup scope

This is because defineProps and defineEmits are hoisted out of setup into module scope

Therefore, the following code will not function correctly:

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

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

How to resolve the code above?

Refer to variables that are within 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) // <= Utilize 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 accessible in setup scope

export default {}
</script>

Answer 2

When using eslint and Vue, the warning for imported bindings has been resolved in newer versions.

If you still encounter a warning or error, here's how to address it!

To clarify, a component can have two scopes:

Setup scope:

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

Module scope:

<script>
// Module scope
</script>

defineProps should not reference local variables declared in setup scope

This is because defineProps and defineEmits are hoisted out of setup into module scope

Therefore, the following code will not function correctly:

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

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

How to resolve the code above?

Refer to variables that are within 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) // <= Utilize 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 accessible in setup scope

export default {}
</script>

Answer 3

Answer №2

This caution is put in place to discourage this specific practice (from the eslint(vue/valid-define-props) documentation):

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

If you actually 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>

Answer 4

This caution is put in place to discourage this specific practice (from the eslint(vue/valid-define-props) documentation):

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

If you actually 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>

Vue 3: `defineProps` allows components to locally reference declared variables

Answer №1

If you still encounter a warning or error, here's how to address it!

`defineProps` should not reference local variables declared in setup scope

How to resolve the code above?

Solution 1. Imported bindings are in the local scope:

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

Answer №2

Similar questions

Error message thrown by a React custom hook: "Error: Queue is missing. This is probably a bug within React. Please report this issue."

Wait for the canvas to fully load before locating the base64 data in HTML5

Request successful but receiving no response text and content length is zero

How can I dynamically remove an option from a select dropdown if it already exists in another option using jQuery?

Notifying the view with a SignalR message from the controller upon event trigger

Encountering an error message when trying to launch an application: Module

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

How can I utilize columns from a junction table in the "where" clause in sequelize?

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

Tips for customizing the appearance of a redux-tooltip

Symfony2 encountering difficulties in locating file after deployment

Does the round function always produce the most accurate floating point approximation?

Dominate with asyncCommand and Ajax in MVC ActionResults

Validating optional fields in React

Creating dependent dropdown lists is a useful way to streamline data entry and ensure accuracy in your

The code to assign a value to "parentId1" using window.opener.document.getElementById is malfunctioning

Retrieve the image and insert it using an img tag

Tips for defining the type of a parameter in a Vue Component

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Refreshing an Angular datatable using promises - reload directive

Vue 3: `defineProps` allows components to locally reference declared variables

Answer №1

If you still encounter a warning or error, here's how to address it!

defineProps should not reference local variables declared in setup scope

How to resolve the code above?

Solution 1. Imported bindings are in the local scope:

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

Answer №2

Similar questions

Error message thrown by a React custom hook: "Error: Queue is missing. This is probably a bug within React. Please report this issue."

Wait for the canvas to fully load before locating the base64 data in HTML5

Request successful but receiving no response text and content length is zero

How can I dynamically remove an option from a select dropdown if it already exists in another option using jQuery?

Notifying the view with a SignalR message from the controller upon event trigger

Encountering an error message when trying to launch an application: Module

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

How can I utilize columns from a junction table in the "where" clause in sequelize?

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

Tips for customizing the appearance of a redux-tooltip

Symfony2 encountering difficulties in locating file after deployment

Does the round function always produce the most accurate floating point approximation?

Dominate with asyncCommand and Ajax in MVC ActionResults

Validating optional fields in React

Creating dependent dropdown lists is a useful way to streamline data entry and ensure accuracy in your

The code to assign a value to "parentId1" using window.opener.document.getElementById is malfunctioning

Retrieve the image and insert it using an img tag

Tips for defining the type of a parameter in a Vue Component

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Refreshing an Angular datatable using promises - reload directive

`defineProps` should not reference local variables declared in setup scope