ambitious-aqua

props.validate is not a function

Hi guys! I'm out of my wits trying find a solution for this error. And I'm using version: "@tanstack/react-form": "^1.14.1", "zod": "^3.25.16", I'm trying to use zod for validation but whenever I try to input I get this props.validate as an error:

16 Replies

ambitious-aquaOP•2mo ago

const testSchema = z.object({
    name: z
        .string()
        .min(3, "Must be at least 3 characters")
        .max(50, "Cannot exceed 50 characters"),
});

function RouteComponent() {
    const form = useForm({
        defaultValues: {
            name: "",
        },
        validators: {
            onChange: testSchema,
        },
        onSubmit: (values) => {
            console.log(values);
        },
    });
    return (
        <div>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    form.handleSubmit();
                }}
            >
                <form.Field
                    name="name"
                    children={(field) => (
                        <div>
                            <div>
                                <Label htmlFor="name">Name</Label>
                                <Input
                                    id={field.name}
                                    name={field.name}
                                    value={field.state.value}
                                    onChange={(e) => field.handleChange(e.target.value)}
                                />
                            </div>
                            <FieldError field={field} />
                        </div>
                    )}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

const testSchema = z.object({
    name: z
        .string()
        .min(3, "Must be at least 3 characters")
        .max(50, "Cannot exceed 50 characters"),
});

function RouteComponent() {
    const form = useForm({
        defaultValues: {
            name: "",
        },
        validators: {
            onChange: testSchema,
        },
        onSubmit: (values) => {
            console.log(values);
        },
    });
    return (
        <div>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    form.handleSubmit();
                }}
            >
                <form.Field
                    name="name"
                    children={(field) => (
                        <div>
                            <div>
                                <Label htmlFor="name">Name</Label>
                                <Input
                                    id={field.name}
                                    name={field.name}
                                    value={field.state.value}
                                    onChange={(e) => field.handleChange(e.target.value)}
                                />
                            </div>
                            <FieldError field={field} />
                        </div>
                    )}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

other-emerald•2mo ago

I should read the version before spitting guesses. Sorry about that 😅 anyways, validate should definitely be there for standard schemas, and your zod version is high enough for that. Does clearing node_modules and reinstalling packages work? https://stackblitz.com/edit/vitejs-vite-n5vvckrv?file=package.json @josh-dev627 appears to work on a freshly installed stackblitz with zod v3.25.16

ambitious-aquaOP•2mo ago

Thanks @Luca | LeCarbonator yup I've re-installed the packages as I was trailing a similar issue that you commented also haha

other-emerald•2mo ago

well, thanks to retrying this, i learned that zod v4 is officially out! So that‘s great news too

ambitious-aquaOP•2mo ago

I'll create a fresh project and see if it still happens tho but It's unfortunate I've done re-installation like 2 times. I wonder what might be the cause for this.

other-emerald•2mo ago

do you use pnpm perhaps? I heard from a user earlier today that they had to clear cache first

ambitious-aquaOP•2mo ago

yup I'm using pnpm, I wonder what command they use

other-emerald•2mo ago

they didn't specify. Just said to 'clear the cache'

ambitious-aquaOP•2mo ago

fingers crossed, re installing again haha still the same, I still get the error :((

other-emerald•2mo ago

did you simply prune the cache or delete it completely?

ambitious-aquaOP•2mo ago

I pruned it This only happens when I have a validate function

other-emerald•2mo ago

can you try calling yourZodSchema['~validate']?

ambitious-aquaOP•2mo ago

it's undefined uhhh I think I might have found the culprit @Luca | LeCarbonator

other-emerald•2mo ago

well there you have it your zod is not standard schema

ambitious-aquaOP•2mo ago

I don't know why but because of how my pnpm workspace was set zod versions were mismatched this might have cause an issue because of how pnpm packages work? but yeah thank you!

other-emerald•2mo ago

🚀 finally!

Gaming

Programming

props.validate is not a function

Did you find this page helpful?