Updated to vee-validate 4.8.0: App throws "Cannot set properties of undefined"

[ahoiroman]

What happened?

Givent this custom form:

<template>
    <input v-model="value"
           v-bind="$attrs"/>
</template>
<script setup lang="ts">
import {useField} from 'vee-validate';

interface Props {
    name: string;
    modelValue?: string;
    waiting?: boolean,
    disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    waiting: false,
    disabled: false,
    modelValue: ''
});

const nameRef = toRef(props, 'name');
const {
    value,
    errorMessage,
    meta,
} = useField(nameRef, undefined);
</script>

This worked out fine in eve-validate < 4.8.0, but now throws:

value cannot be made reactive: undefined
[Vue warn]: Unhandled error during execution of setup function 
  at <InputStringBase modelValue=undefined onUpdate:modelValue=fn<onUpdate:modelValue> name="name"  ... >
[nuxt] error caught during app initialization TypeError: Cannot set properties of undefined (setting 'name')
    at setInPath (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/vee-validate/dist/vee-validate.js:325:30)
    at Object.stageInitialValue (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/vee-validate/dist/vee-validate.js:2082:13)
    at _useFieldValue (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/vee-validate/dist/vee-validate.js:962:14)
    at useFieldState (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/vee-validate/dist/vee-validate.js:899:58)
    at _useField (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/vee-validate/dist/vee-validate.js:1045:83)
    at useField (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/vee-validate/dist/vee-validate.js:1037:16)
    at setup (file:///Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/chunks/app/_application/BaseButton-e84c286f.mjs:22:9)
    at _sfc_main$2.setup (file:///Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/chunks/app/_application/BaseButton-e84c286f.mjs:42:25)
    at callWithErrorHandling (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22)
    at setupStatefulComponent (/Users/ahoiroman/Entwicklung/nuxtjs/nuxt-project/.output/server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29) {
  statusCode: 500,
  fatal: false,
  unhandled: false,
  statusMessage: undefined,
  __nuxt_error: true
}

Reproduction steps

No response

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Copied your code to a fresh nuxt installation and it doesn't seem to happen, can you create a repo/example for this?

[ahoiroman]

I will do that.

Maybe one more note: I did not see that error using npm run dev, but in npm run build && npm run start (production mode), while npm run start is just this script:

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "start": "env-cmd -f ./.env  node .output/server/index.mjs"
  }

[logaretm]

Thanks for the note, tried building and running it in production and seems to work. Will wait for your example and thanks for reporting this.

[ahoiroman]

I created the reproducer: https://github.com/ahoiroman/veevalidate-reproducer

Just check it out, install rpm packages and run it in dev or prod mode (in this new project the error appears in dev mode too)

Maybe those info can help, too:

• Operating System: Darwin
• Node Version: v19.5.0
• Nuxt Version: 3.2.3
• Nitro Version: 2.2.3
• Package Manager: npm@9.3.1
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

[logaretm]

Fixed in 4.8.1, doesn't happen in local tests which is weird. Thanks for reporting this!

[ahoiroman]

Thank you for your work!

[madsh93]

It seems to happen to me in 4.8.1

More specifically the initialValues seem to be causing this:

Here is a gist:
https://gist.github.com/madsh93/49c352f7198c5625a928a81e9ff82b5d

Nuxt: 3.3.1

[logaretm]

@madsh93 Thanks, found another bug with this. Will be tagging a fix tonight.

[logaretm]

@madsh93 Tagged 4.8.3, can you confirm if it fixes your issue?