foreign-sapphire

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

inland-turquoise•2d ago

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

foreign-sapphireOP•2d 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

inland-turquoise•2d 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

foreign-sapphireOP•2d 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.

foreign-sapphireOP•2d ago

Here is the stack trace from the devtools:

message.txt

inland-turquoise•2d 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?

foreign-sapphireOP•2d 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 🤣.

inland-turquoise•2d 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

foreign-sapphireOP•2d ago

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

foreign-sapphireOP•2d ago

For more context.

form-combobox.txt

foreign-sapphireOP•2d 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.

inland-turquoise•22h 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

foreign-sapphireOP•18h ago

Awesome! Thanks a ton!

Gaming

Programming

Cannot read properties of undefined (reading 'length')

Did you find this page helpful?