SvelteKit Form Action not returning success / remains null

Question

I have the following setup in my +page.server.js:

export const actions = {
    createScore: async ({ request }) => {
        const values = await request.formData();

        try {
            const instagram = values.get('username');
            const score = Number(values.get('score'));

            await prisma.score.create({
                data: {
                    score,
                    instagram
                }
            });

            return { success: true };
        } catch (err) {
            console.error(err);
            return fail(500, { message: 'Could not create the score.' });
        }
    }
};

This runs fine, I see the entry in the database. However, no matter how hard I try, I cannot access 'form' to check for the return of sucess in my front end.

I do the following in page.svelte

<script>
    export let form;
    console.log(form);
</script>

The console log consistently returns null when the form is run.

Further, the following never renders (telling me I am not missing a state change):

{#if form?.success}
<p>It Worked</p>
{/if}

Finally, form as follows:

<form action="?/createScore" method="POST">
<input type="text" id="score" name="score" />
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>

Am I missing something?

Pyrope

Show the form that triggers the action. – Slipsheet

Also, if anything, you would want to log reactively: $: console.log(form); – Slipsheet

Thanks @H.B., I have added the form (its very simple - stripped down for trying to get to teh route cause). Tried this to see if anything changed but didnt get a subsequent console.log. – Pyrope

One addition, I also removed all the database stuff entirely and just returned success but this didnt seem to work either – Pyrope

I do not see any issues here. The page file is named +page.svelte, correct? Also, would recommend using the enhance action to not fully reload the page on submit. – Slipsheet

It is but strangely, enhance seems to have done it and I am now getting something back! Thanks – Pyrope

It would be appreciated if you could create a minimal example of the issue (when not using enhance) and report that in the respective repository. Forms should still work as intended when no JS is running on the client. – Slipsheet

Forms are really a far fetched concept from handling things. Have bumped into cross-side requests errors, routes n-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles. The "/[lang]" and "/[lang]/(app)" routes conflict with each other and along other problemts. – Ululate

Ran into same issue today, adding use:enhance solved it. Not sure why it was necessary though – Collinear

Answer 1

I cannot access 'form' to check for the return of success in my front end.

Maybe different in your case, but I came across the same issue once when I first started learning SvelteKit.

In my case, I had turned off server-side rendering in a +layout.js file so that I could access the window object on the frontend:

export const ssr = false; (I got that here.)

Commenting out that line (along with re-working the way that I handled localstorage access) solved my issue.

Salvidor

Answer 2

I had the same problem. I could fix it by moving the Form from a component to +page.svelte.

Reticulum

Answer 3

My issue was that I had a variable with the same name as the actionData. When I changed it it worked.

Reinforcement