You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Before posting an issue, read the FAQ and search the previous issues.
Description
I'm trying to even further componentize the approach in the componentization guide, by allowing users to pass an array of the FormPathLeaves to render the form fields.
However, I'm seeing a TS error, "Type instantiation is excessively deep and possibly infinite" when trying to use FormPathLeaves as a variable, rather than hardcoding it. You can see three parallel approaches in the below snippet.
<script lang="ts">
import { z } from 'zod';
import type {
SuperValidated,
Infer,
FormPathLeaves,
} from 'sveltekit-superforms';
import { superForm } from 'sveltekit-superforms';
import TextField from './TextField.svelte';
export const userFormSchema = z.object({
name: z.string().default('Hello world!'),
email: z.string().email(),
});
type UserFormSchema = typeof userFormSchema;
export let data: SuperValidated<Infer<UserFormSchema>>;
const pathLeaves: FormPathLeaves<Infer<UserFormSchema>>[] = ['name', 'email'];
const constPathLeaves = ['name', 'email'] as const;
const form = superForm(data);
const { enhance } = form;
</script>
<form method="POST" use:enhance>
{#each pathLeaves as field}
<!-- TS error: Type instantiation is excessively deep and possibly infinite. -->
<TextField superform={form} {field} />
{/each}
<!-- Directly specifying the values is fine. -->
<TextField superform={form} field="name" />
<TextField superform={form} field="email" />
{#each constPathLeaves as field}
<!-- Using "as const" is also fine. -->
<TextField superform={form} {field} />
{/each}
<div><button>Submit</button></div>
</form>
This may very well be some limitation of my typescript knowledge... but is this just not intrinsically possible? Should I be listing out the paths with a different type annotation?
If applicable, a MRE
See this example, which has the error on Sveltelab when you view the LoginForm.svelte file: EXAMPLE
The text was updated successfully, but these errors were encountered:
If you click into LoginForm.svelte now, the issue will appear
Again, this might be a limitation of Typescript (or my knowledge thereof) but I am very thankful that you would take a look -- to me, extending the componentization even further was the natural thing to do.
I see now, I should have looked closer at the code example. You need const, otherwise it will treat each value as string and that will probably mess up the typing. The types behind the scenes are quite complicated, especially with generics.
I did manage to remove the error once locally, so try updating to latest typescript (and maybe latest svelte 5) and maybe it will work.
Description
I'm trying to even further componentize the approach in the componentization guide, by allowing users to pass an array of the FormPathLeaves to render the form fields.
However, I'm seeing a TS error, "Type instantiation is excessively deep and possibly infinite" when trying to use FormPathLeaves as a variable, rather than hardcoding it. You can see three parallel approaches in the below snippet.
This may very well be some limitation of my typescript knowledge... but is this just not intrinsically possible? Should I be listing out the paths with a different type annotation?
If applicable, a MRE
See this example, which has the error on Sveltelab when you view the LoginForm.svelte file: EXAMPLE
The text was updated successfully, but these errors were encountered: