typescriptsveltesvelte-5sveltekit-superforms

Form Enhancement with Superforms and Shadcn Svelte does not work in svelte 5


I've started a new project using svelte kit with svelte 5. I opted for shadcn-svelte and build a simple login form with superforms.

<script lang="ts">
    import type {PageData} from "./$types";
    import {FormField, FormControl, FormLabel, FormButton, FormFieldErrors} from "$lib/components/ui/form";
    import {superForm} from "sveltekit-superforms";
    import {zodClient} from "sveltekit-superforms/adapters";
    import {formSchema} from "./schema.js";
    import {Input} from "$lib/components/ui/input";
    import {LoaderCircle} from 'lucide-svelte';
    import {Button} from "$lib/components/ui/button";

    let {data} = $props();

    let form = superForm(data.form, {
        validators: zodClient(formSchema)
    });


    const {form: formData, enhance, submitting} = form;
</script>

    <form action="?/login" method="post" use:enhance>
            <FormField form={form} name="email">
                <FormControl>
                    {#snippet children({props})}
                        <FormLabel>Email</FormLabel>
                        <Input {...props} bind:value={$formData.email} />
                    {/snippet}
                </FormControl>
                <FormFieldErrors />
            </FormField>
            <FormField {form} name="password">
                <FormControl>
                    {#snippet children({props})}
                        <FormLabel>Password</FormLabel>
                        <Input type="password" {...props} bind:value={$formData.password} />
                    {/snippet}
                </FormControl>
                <FormFieldErrors />
            </FormField>
            <Button type="submit" disabled={$submitting}>
                {#if ($submitting)}
                    <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
                {/if}
                Sign in with email
            </Button>
    </form>

When I send down an error message from the load function with setError(form, 'email', "Message"); it does not appear in the login screen. When I disable progressive enhancement it works?! What am I doing wrong.

When I look in the dev menu, I see that the request was successful and the error message was sent down, but it won't be rendered.

Also, when I hot reload the app, when a message should be shown, it randomly appears.


Solution

  • I don't really know what's going on, but I did use the ParaglideJS Component that came preinstalled with a fresh SvelteKit installation. When I commented it out in my root +layout.svelte, it magically worked.