errorMap is undefined in field's meta but the lib try to access it

[zaosoula]

Sometimes when updating field i get error because the lib try to read "onServer"/"onChange" inside "errorMap" but "errorMap" is not defined

tanstack/form-core: 0.26.3
tanstack/vue-form: 0.26.3

To prevent the error I added this snippet after calling "useForm"

  const store = form.useStore();
  Object.entries(store.value.values).forEach(([key, value]) => {
    form.setFieldMeta(key, (prev) => ({
      errorMap: {},
      ...prev,
    }));
  })

[zaosoula]

Additional context: it happens after calling form.setFieldValue directly after useForm

watch(deps, () => {
  form.setFieldValue('name', 'john doe')
})

but if i do this, it work

watch(deps, () => {
    nextTick(() => {
    form.setFieldValue('name', 'john doe')
  }
})

however calling setFieldValue with { dontUpdateMeta: true } prevent the bug from happening

watch(deps, () => {
  form.setFieldValue('name', 'john doe', { dontUpdateMeta: true })
})

[zaosoula]

Changes relative to this had been added by this commit: 4e4a3ae
(poke @crutchcorn)

[zaosoula]

I'll leave there the details of my debugging for context purpose,
my final fixes was to remove the snippet mentioned above

  const store = form.useStore();
  Object.entries(store.value.values).forEach(([key, value]) => {
    form.setFieldMeta(key, (prev) => ({
      errorMap: {},
      ...prev,
    }));
  })

and always call setFieldValue with opts: { dontUpdateMeta: true }

(which is not documented and not mentioned in the releases notes)

[crutchcorn]

If you are using dontUpdateMeta you are almost 1000000% doing something wrong. There is a good reason it is not documented.

Please follow the issue template and provide a minimal reproduction, otherwise there's nothing we can do to help.

[BrendonSled]

Might be a little late to the party but I ran into the same issue. It ended up being an onChange firing after the component unmounted. I ended up wrapping the onChange with a conditional check if a ref to that component was not null.

Like so:

onChange={(markdown) => {
    if (mdxEditorRef.current) {
        onChange(markdown);
    }
}}

[craigbehnke]

I also ran into an error that I think is related to this issue. I also was using setState and setMeta like this:

field.form.store.setState(x => ({
    ...x,
    values: {
      myValue: true,
      myOtherValue: 12345
    }
}))
field.setMeta(x => ({
    ...x,
    isTouched: true
}))

While I am not sure that the above snippet is responsible, I was getting the following error stacktrace when I tried to reset the form (form.reset()):

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at Object.onUpdate (FieldApi.ts:470:1)
    at Store.setState (index.ts:48:1)
    at FieldApi.ts:528:1
    at Store.batch (index.ts:64:1)
    at FieldApi.ts:523:1
    at index.ts:59:1
    at Set.forEach (<anonymous>)
    at Store._flush (index.ts:57:1)
    at Store.batch (index.ts:68:1)Caused by: React ErrorBoundary TypeError: Cannot convert undefined or null to object

I was able to work around the issue by adding the following onMount callback to my field validator object, like so:

<form.Field
  name="myValue"
  validators={{
    onMount: field => {
      if (
        !field.fieldApi.state.meta.errorMap
      ) {
        field.fieldApi.state.meta.errorMap =
          {}
      }
      return null
    }
  }}
>{/* Field display components */}</form.Field>

Any idea what could be causing this?