Question

41

Vue 3: `defineProps` are referencing locally declared variables

rated 0 times [ 42] [ 1] / answers: 1 / hits: 6838 / 3 Years ago, sat, november 13, 2021, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

1 Is it possible to return resolved value from promise without async/await?

Sun, Jun 16, 19, 00:00, 5 Years ago

View All

answered 3 Years ago hailie · Accepted Answer

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>