TypeError: Cannot read properties of undefined (reading 'split') - normalizeFormPath function

Vercuski commented 1 year ago

What happened?

I'm working with Nuxt 3.7.3 and vee-validate 4.11.6. On every page call I am seeing the following console error

vee-validate.esm.js:63 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
    at normalizeFormPath (vee-validate.esm.js:63:26)
    at ReactiveEffect.fn (vee-validate.esm.js:1571:33)
    at ReactiveEffect.run (chunk-RAKT47ZN.js:423:19)
    at get value [as value] (chunk-RAKT47ZN.js:1383:35)
    at unref (chunk-RAKT47ZN.js:1263:29)
    at toValue (chunk-RAKT47ZN.js:1266:42)
    at validateCurrentValue (vee-validate.esm.js:1619:23)
    at meta.valid (vee-validate.esm.js:1641:16)
    at runLatest (vee-validate.esm.js:501:25)
    at vee-validate.esm.js:1665:13

The error is happening in the normalizeFormPath function

function normalizeFormPath(path) {
    const pathArr = path.split('.'); <-- Error Here
    if (!pathArr.length) {
        return '';
    }
    let fullPath = String(pathArr[0]);
    for (let i = 1; i < pathArr.length; i++) {
        if (isIndex(pathArr[i])) {
            fullPath += `[${pathArr[i]}]`;
            continue;
        }
        fullPath += `.${pathArr[i]}`;
    }
    return fullPath;
}

The issue is that the path is undefined. I'm not entirely sure how the incoming path is undefined on every call. There is a check to see if the path.length after the split is valid and if not just return ''. Would a check if the path is undefined before the path.split be good to put in and return '' as well?

I can provide some more info upon request, I'm just not sure where to begin since this issue is happening on every page and the stack trace doesn't flag any of my code that I can see.

Thank you for your help !

Reproduction steps

Installed vee-validate using yarn add vee-validate
Import the vee-validate form using import { Form } from "vee-validate";

Setup the form with initial values and a validation-schema

<Form
  v-slot="{ handleSubmit, isSubmitting, errors }"
  :initial-values="assetCategory"
  class="asset-form"
  as="form"
  :validation-schema="schema"
  @submit="save"
>

Schema

const schema = yup.object({
name: yup.string().required().max(50),
});

This is only one one page though, the error is happening on every page change. ...

Version

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

What browsers are you seeing the problem on?

[X] Firefox
[X] Chrome
[ ] Safari
[ ] Microsoft Edge

Relevant log output

vee-validate.esm.js:63 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
    at normalizeFormPath (vee-validate.esm.js:63:26)
    at ReactiveEffect.fn (vee-validate.esm.js:1571:33)
    at ReactiveEffect.run (chunk-RAKT47ZN.js:423:19)
    at get value [as value] (chunk-RAKT47ZN.js:1383:35)
    at unref (chunk-RAKT47ZN.js:1263:29)
    at toValue (chunk-RAKT47ZN.js:1266:42)
    at validateCurrentValue (vee-validate.esm.js:1619:23)
    at meta.valid (vee-validate.esm.js:1641:16)
    at runLatest (vee-validate.esm.js:501:25)
    at vee-validate.esm.js:1665:13
normalizeFormPath @ vee-validate.esm.js:63
(anonymous) @ vee-validate.esm.js:1571
run @ chunk-RAKT47ZN.js:423
get value @ chunk-RAKT47ZN.js:1383
unref @ chunk-RAKT47ZN.js:1263
toValue @ chunk-RAKT47ZN.js:1266
validateCurrentValue @ vee-validate.esm.js:1619
meta.valid @ vee-validate.esm.js:1641
runLatest @ vee-validate.esm.js:501
(anonymous) @ vee-validate.esm.js:1665
(anonymous) @ chunk-RAKT47ZN.js:4075
callWithErrorHandling @ chunk-RAKT47ZN.js:1565
callWithAsyncErrorHandling @ chunk-RAKT47ZN.js:1573
hook.__weh.hook.__weh @ chunk-RAKT47ZN.js:4055
flushPostFlushCbs @ chunk-RAKT47ZN.js:1731
flushJobs @ chunk-RAKT47ZN.js:1769
await in flushJobs (async)
(anonymous) @ vee-validate.esm.js:1665
(anonymous) @ chunk-RAKT47ZN.js:4075
callWithErrorHandling @ chunk-RAKT47ZN.js:1565
callWithAsyncErrorHandling @ chunk-RAKT47ZN.js:1573
hook.__weh.hook.__weh @ chunk-RAKT47ZN.js:4055
flushPostFlushCbs @ chunk-RAKT47ZN.js:1731
flushJobs @ chunk-RAKT47ZN.js:1769
Promise.then (async)
queueFlush @ chunk-RAKT47ZN.js:1676
queueJob @ chunk-RAKT47ZN.js:1670
(anonymous) @ chunk-RAKT47ZN.js:7208
triggerEffect @ chunk-RAKT47ZN.js:614
triggerEffects @ chunk-RAKT47ZN.js:604
triggerRefValue @ chunk-RAKT47ZN.js:1211
(anonymous) @ chunk-RAKT47ZN.js:1371
triggerEffect @ chunk-RAKT47ZN.js:614
triggerEffects @ chunk-RAKT47ZN.js:599
triggerRefValue @ chunk-RAKT47ZN.js:1211
set value @ chunk-RAKT47ZN.js:1255
finalizeNavigation @ vue-router.js:2410
(anonymous) @ vue-router.js:2320
Promise.then (async)
pushWithRedirect @ vue-router.js:2288
push @ vue-router.js:2214
editUom @ index.vue:55
onClick @ index.vue:24
callWithErrorHandling @ chunk-RAKT47ZN.js:1565
callWithAsyncErrorHandling @ chunk-RAKT47ZN.js:1573
invoker @ chunk-RAKT47ZN.js:9397

Demo link

N/A

Code of Conduct

[x] I agree to follow this project's Code of Conduct

logaretm commented 1 year ago

You probably forgot to give a field a name prop, either with useField or <Field /> which would cause this error.

I can't see any fields in your snippet so I can't tell where the problem is coming from. Please recreate the issue in an online sandbox.

shehab267 commented 1 year ago

You probably forgot to give a field a name prop, either with useField or <Field /> which would cause this error.

I can't see any fields in your snippet so I can't tell where the problem is coming from. Please recreate the issue in an online sandbox.

I had the same issue and, yes, it was because of the missing name prop. Thank you for pointing that out.

titusdecali commented 9 months ago

Seems to me this error message could be vastly improved beyond the cryptic message we get today. It's too easy to make that mistake and then your app crashes due to a missing prop.

logaretm / vee-validate