Skip to content

"Cannot read properties of undefined" when removing array field #1323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
juanvilladev opened this issue Mar 22, 2025 · 3 comments · May be fixed by #1370
Open

"Cannot read properties of undefined" when removing array field #1323

juanvilladev opened this issue Mar 22, 2025 · 3 comments · May be fixed by #1370

Comments

@juanvilladev
Copy link
Contributor

juanvilladev commented Mar 22, 2025 •
edited
Loading

Describe the bug

When removing elements from array using the removeFieldValue api, we sometimes receive:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'errorMap')

I am able to reproduce this when removing an element that contains a field inside that has an error.
At some point in the validation logic triggered within removeFieldValue, we're reaching out to get the errorMap for a field that's undefined at that point.

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-ypgebmzr?file=src%2Fcomponents%2FForm.tsx

Steps to reproduce

Simply add a few rows, then delete at least 2. Take a look at the console and you will see:

@tanstack_react-form.js?v=b58a52f4:970 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'errorMap')
    at @tanstack_react-form.js?v=b58a52f4:970:27
    at functionalUpdate (@tanstack_react-form.js?v=b58a52f4:410:42)
    at @tanstack_react-form.js?v=b58a52f4:1132:22
    at Store.setState (@tanstack_react-form.js?v=b58a52f4:283:124)
    at FormApi.setFieldMeta (@tanstack_react-form.js?v=b58a52f4:1127:22)
    at @tanstack_react-form.js?v=b58a52f4:967:20
    at batch (@tanstack_react-form.js?v=b58a52f4:255:5)
    at FormApi.validateSync (@tanstack_react-form.js?v=b58a52f4:924:7)
    at FieldApi.validate (@tanstack_react-form.js?v=b58a52f4:1894:123)
    at FormApi.validateField (@tanstack_react-form.js?v=b58a52f4:918:28)

Notice how when we push rows we are pushing a value that is not valid (per the form level schema) to the interestLevel field. If we were to push a valid value (greater than 5) the issue goes away.

Expected behavior

When I remove an array element, regardless of subfields containing errors or not, we should never be attempting to pull errorMap from undefined (resulting in the error message).

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

React, TypeScript,

TanStack Form adapter

None

TanStack Form version

v1.1.2

TypeScript version

v5.7.2

Additional context

This will affect any users that attempt to use a standard schema validator at form level and attempt to delete a row with subfields containing errors. I'm looking into fixing it already, please assign me the issue if you have access! Thanks!
@juanvilladev juanvilladev mentioned this issue Mar 23, 2025
Closed
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 23, 2025
@juanvilladev
fix(form-core): fix broken sync validation logic
f19d461 
This commit removes cumulativeFieldsErrorMap in favor of a much simpler validationSourceMap.
The validationSourceMap is within the fieldMeta allowing it to shift with array actions.

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 23, 2025
@juanvilladev
fix(form-core): fix broken async validation logic
ec35b26 
This commit updates async validators to ensure source map is synced with full coverage.

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
@juanvilladev
Copy link
Contributor Author

Determined that this issue actually plagues all validations post array shifting/inserting/moving/removing....

I have opened #1324 to resolve this in a much cleaner way.

@yekta
Copy link

yekta commented Mar 24, 2025

I'm having the same issue.

@juanvilladev
Copy link
Contributor Author

juanvilladev commented Mar 26, 2025 •
edited
Loading

Hope you guys like this approach, it'll allow us to fix the issue without a breaking change.

Long term we may want to update this type though to include the source:

export type ValidationErrorMap<
  TOnMountReturn = unknown,
  TOnChangeReturn = unknown,
  TOnChangeAsyncReturn = unknown,
  TOnBlurReturn = unknown,
  TOnBlurAsyncReturn = unknown,
  TOnSubmitReturn = unknown,
  TOnSubmitAsyncReturn = unknown,
  TOnServerReturn = unknown,
> = {
  onMount?: {
    error: TOnMountReturn
    source: ValidationSource
  }
  onChange?: {
    error: TOnChangeReturn | TOnChangeAsyncReturn
    source: ValidationSource
  }
  onBlur?: {
    error: TOnBlurReturn | TOnBlurAsyncReturn
    source: ValidationSource
  }
  onSubmit?: {
    error: TOnSubmitReturn | TOnSubmitAsyncReturn
    source: ValidationSource
  }
  onServer?: {
    error: TOnServerReturn
    source: ValidationSource
  }
}

This way we minimize the use of memory and have a single source of truth. Once we get closer to V2 I'm happy to implement that if you like it. For now, we the current implementation of a separate errorSourceMap will work without breaking existing usages.

@Ganbin Ganbin mentioned this issue Mar 26, 2025
Open
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 28, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
394082e 
This commit updates async validators to ensure source map is synced with full coverage.

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 28, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
2fdca86 
This commit updates async validators to ensure source map is synced with full coverage.

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 28, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
e79b51b 
This commit updates async validators to ensure source map is synced with full coverage.

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 28, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
efff0a6 
This commit updates async validators to ensure source map is synced with full coverage.

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 28, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
53d51cc 
This commit updates sync and async validation state to shift with FieldMeta

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Mar 28, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
bbb68eb 
This commit updates sync and async validation state to shift with FieldMeta

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Apr 1, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
86ce116 
This commit updates sync and async validation state to shift with FieldMeta

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
juanvilladev added a commit to juanvilladev/form that referenced this issue Apr 3, 2025
@juanvilladev
fix(form-core): fix broken sync/async validation logic
8fe3a9e 
This commit updates sync and async validation state to shift with FieldMeta

Fixes "Cannot read properties of undefined" when removing array field TanStack#1323
@juanvilladev juanvilladev linked a pull request Apr 3, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@yekta @juanvilladev