ratty-blush

Why my form from useAppForm is of any type even with defaultValues?

How do I get typesefety with form coposition?

26 Replies

quickest-silver•5w ago

I ran into this too and Luca LeCarbonator suggested adding a specific type to the default values:

const defaultValues: z.input<typeof myFormSchema> = {
…
}

const defaultValues: z.input<typeof myFormSchema> = {
…
}

and then pass that into the useAppForm. should fix the type inference that still doesn't make sense though, in my code, i still get a type on the form when defaultValues isn't given a concrete type.

sunny-green•5w ago

that looks like a temporary TS server error. Have you tried restarting it?

ratty-blushOP•5w ago

It doesn't work unfortunately

ratty-blushOP•5w ago

Tried restarting TS server/editor window reload

sunny-green•5w ago

what's your TypeScript version

ratty-blushOP•5w ago

"typescript": "^5.9.3", All the latest. Spun up project yesterday

sunny-green•5w ago

it's an irritating issue, because I remember multiple conversations, but all of them had different solutions and of course I can't find them in chatlog as reference

ratty-blushOP•5w ago

I'm losing type already here

ratty-blushOP•5w ago

I'm using basic shadcn components

sunny-green•5w ago

hmm ... what are your imports for creating createFormHook?

ratty-blushOP•5w ago

If it helps here is my package.json with all deps versions

sunny-green•5w ago

looks completely fine. Removing node_modules and reinstalling also doesn't work?

ratty-blushOP•5w ago

Yep, just did that as I thought it might help But no luck

sunny-green•5w ago

about this section - Is this component made by you, or is this one of the imported shadcn components?

ratty-blushOP•5w ago

Imported from shadcn

ratty-blushOP•5w ago

Just plain input

sunny-green•5w ago

was just curious about the source of useFieldContext in there, but it looks like that does come from you yeah, I'm stumped. The last confirmed chatlog I could find was a typescript < v5.4 issue, so that's not applicable here

ratty-blushOP•5w ago

Are there ways it's possible that downgrading some dependencies might resolve this? If so what would you suggest I change?

sunny-green•5w ago

Hmm, nothing in particular. I do notice that you're likely on the RC of TanStack Start, so perhaps @nneaowwplane knows about this

flat-fuchsia•5w ago

I don't see any reason that start has to do with this. 🙃

sunny-green•5w ago

well, it was worth a try :Sadge:

ratty-blushOP•5w ago

Does anyone has any idea what I could do to try to fix it? I tried downgrading typescript and tanstack/form and issues persist the type I get for useAppForm is

alias) useAppForm<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: $InferEnumOutput<{
        active: "active";
        "on-hold": "on-hold";
        completed: "completed";
    }>;
    description: string;
    totalBudget: number;
    contingency: number;
}, FormValidateOrFn<...> | undefined, ZodObject<...>, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, unknown>(props: FormOptions<...>): any
import useAppForm

alias) useAppForm<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: $InferEnumOutput<{
        active: "active";
        "on-hold": "on-hold";
        completed: "completed";
    }>;
    description: string;
    totalBudget: number;
    contingency: number;
}, FormValidateOrFn<...> | undefined, ZodObject<...>, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, unknown>(props: FormOptions<...>): any
import useAppForm

With simpler type I get the same return type of any

(alias) useAppForm<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}, FormValidateOrFn<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}> | undefined, ZodObject<...>, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, unknown>(props: FormOptions<...>): any
import useAppForm

(alias) useAppForm<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}, FormValidateOrFn<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}> | undefined, ZodObject<...>, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, unknown>(props: FormOptions<...>): any
import useAppForm

And withForm is

(alias) withForm<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}, FormValidateOrFn<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, unknown, {
    ...;
}>({ render, props, }: WithFormProps<...>): (props: any) => JSX.Element
import withForm

(alias) withForm<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}, FormValidateOrFn<{
    name: string;
    location: string;
    startDate: string;
    endDate: string;
    status: string;
    description: string;
    totalBudget: number;
    contingency: number;
}> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, FormAsyncValidateOrFn<...> | undefined, unknown, {
    ...;
}>({ render, props, }: WithFormProps<...>): (props: any) => JSX.Element
import withForm

quickest-silver•5w ago

And your IDE Typescript is set to your project's version and not built-in Typescript? I debugged a similar issue for a day before I checked that and it resolved my issues.

ratty-blushOP•5w ago

That worked! You're amazing! Thanks

sunny-green•5w ago

keeping that in mind for the future! Great tip!

Gaming

Programming

Why my form from useAppForm is of any type even with defaultValues?

Did you find this page helpful?