rare-sapphire

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

rare-sapphireOP•5mo 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>
    );
}

xenial-black•5mo 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

rare-sapphireOP•5mo ago

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

xenial-black•5mo ago

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

rare-sapphireOP•5mo 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.

xenial-black•5mo ago

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

rare-sapphireOP•5mo ago

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

xenial-black•5mo ago

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

rare-sapphireOP•5mo ago

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

xenial-black•5mo ago

did you simply prune the cache or delete it completely?

rare-sapphireOP•5mo ago

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

xenial-black•5mo ago

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

rare-sapphireOP•5mo ago

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

xenial-black•5mo ago

well there you have it your zod is not standard schema

rare-sapphireOP•5mo 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!

xenial-black•5mo ago

🚀 finally!

Gaming

Programming

props.validate is not a function

Did you find this page helpful?