rising-crimson

Cannot read properties of undefined (reading 'length')

When using field().pushValue on @tanstack/solid-form the error: Cannot read properties of undefined (reading 'length') occurs. Currently on v1.23.5 on tanstack/solid-form. Is anybody else experiencing this?

13 Replies

xenial-black•2mo ago

what field did you try to use this on? Could you share the snippet where this error happens?

rising-crimsonOP•2mo ago

Sure thing 😃. The form component is attached as a txt because it is a little long. The schema is pasted below.

export const CreateGroupFormInput = type({
  name: "string > 0",
  description: "string > 0",
  permissions: type({
    team: "string > 0",
    role: "string > 0"
  }).array().atLeastLength(1),
})

export const CreateGroupFormInput = type({
  name: "string > 0",
  description: "string > 0",
  permissions: type({
    team: "string > 0",
    role: "string > 0"
  }).array().atLeastLength(1),
})

Schema using arktype. The error occurs on the "Add Permission" button when I try adding more fields to the array. Might be worth noting that I also did try populating the role and team fields with default values, both on the defaultValues object and on the object that gets pushed when invoking field().pushValue() and still had the same error.

form-component.txt

xenial-black•2mo ago

hmmm ... would you mind sharing the stack trace of the error? The pushValue call seems right to me it's a shorthand for calling form.pushFieldValue(field.name, ...), so I'm curious if the error also happens if you tried pushing on form level

rising-crimsonOP•2mo ago

                      <Button
                        onclick={() => createGroupForm.pushFieldValue('permissions', { team: '', role: '' })}
                        type="button"
                      >
                        <AppIcon name="add" class="btn-icon" />
                        Add permission
                      </Button>

                      <Button
                        onclick={() => createGroupForm.pushFieldValue('permissions', { team: '', role: '' })}
                        type="button"
                      >
                        <AppIcon name="add" class="btn-icon" />
                        Add permission
                      </Button>

Happens as well with the above implementation.

rising-crimsonOP•2mo ago

Here is the stack trace from the devtools:

message.txt

xenial-black•2mo ago

I wonder which location is causing the error, then. From the stack trace, it might be related to the <Show> call instead of an internal error when logging field().state.value, does it become undefined before <Show> tries to check its length?

rising-crimsonOP•2mo ago

So I placed a createEffect inside the actualy field and at the top level of the component and these are the results. None of them are ever registered as undefined first before showing a value 🤔. Seems like a bit of a sticky one, but I am rather hoping that it's me that's done something wrong 🤣.

xenial-black•2mo ago

could be a fault on our end too, keep that in mind. Most bug reports are from React, so Solid bugs can be overlooked easily just because there's not many testers I'll try to create a reproducible example later with your component

rising-crimsonOP•2mo ago

That's true as well. I forget that there are probably not as many people using the solidjs implementations of the tanstack libraries.

rising-crimsonOP•2mo ago

For more context.

form-combobox.txt

rising-crimsonOP•2mo ago

Everything works fine until I add an additional field. Validation etc is fine. Would be lovely to know if it's a bug or an issue on my end. Also, thank you very much for the assistance. If there is anything else I can do to help, please let me know.

xenial-black•2mo ago

alright, I'll let you know. I'll share the stackblitz reproduction here once I get around to it so you can confirm that it's the behaviour you're experiencing

rising-crimsonOP•2mo ago

Awesome! Thanks a ton! Interesting development @Luca | LeCarbonator , the bug only seems to pop up when making use of Form Composition...I kept trying to figure out why the stackblitz example on the docs works flawlessly and decided to remove the useAppForm and it works fine. Turns out there is no bug. I switched out my underlying component library from Kobalte to ArkUI and the error ceased to exist. I am not show what is happening underneath the hood with Kobalte...

Gaming

Programming

Cannot read properties of undefined (reading 'length')

Did you find this page helpful?