How can form from $props be undefined?

[Vulcagon]

I'm making a small website where you can create your own collections of something. I'm not an experienced web developer at all, it's actually my first website. I tried to work with forms and handle errors on submission. I followed the tutorials on the svelte website on forms.

Every collection needs to have it's own unique name so an error should be displayed if you try to rename a collection to an already existing name. The collection's name is also used in the URL part to get to the collection. My +page.server.ts file in the [collection] folder looks something like the following. You can't only rename the collection you can also add or remove items from the collection but those are just functions returning Promise<void> with no error handling at all. I'm using PostgreSQL as my database and the postgres npm package to communicate to my database. renameCollection from $lib/server/db.js takes the collection name that should be renamed as first argument and the new name as second argument and doesn't return anything.

import { renameCollection } from '$lib/server/db.js';
import { fail, redirect } from '@sveltejs/kit';

export const actions = {
    rename: async ({ request, params }) => {
        const name = (await request.formData()).get('name') as string;

        try {
            await renameCollection(params.collection, name);
        } catch (e: any) {
            if (e.constraint_name === 'collections_pkey') {
                return fail(422, { error: `A collection named "${name}" already exists` });
            }

            throw e;
        }

        throw redirect(303, `/${name}`);
    },
    add: async ({ request, params }) => { ... },
    remove: async ({ request, params }) => { ... }
};

When now accessing form from $props in my +page.svelte file (const { data, form } = $props()) form should always be of type ActionData, in my case of type { error: string } | null but never undefined. Inspecting form with $inspect(form) also tells me that initially from is null and when trying to rename my collection to an already existing name form gets updated to { error: string } as expected (I'm using enhance from $app/forms to prevent a full page reload). But if I now trigger a different action like add or remove form gets updated to null and then immediately to undefined. While it's strange in the first place that form ever becomes undefined it's not hard to make my code also handle the case where form is undefined. But if I now trigger a rename with the exact same already existing name form doesn't get updated at all and stays undefined. Only if I trigger rename with another already existing name form gets updated to { error: string } again. I'm not sure why this is the case but I have the feeling it has something to do with form ever getting undefined which should never happen in the first place. Is it because I have another +page.ts file which triggers in between, after +page.server.ts before +page.svelte gets the new form value? Or is it just a problem of my browser (I'm using Zen which is built on top of FireFox)? I just can't figure out why I don't get the same error again when trying to rename a collection to the same forbidden name which is pretty frustrating.

Thank you all for trying to help me.

[Vulcagon]

I've actually managed to fix the issue that trying to rename the collection to the same forbidden name as the last time didn't error again. It was just me being dumb and searching for the issue at the completely wrong place. I just didn't retrigger the action. But the question why form gets undefined remains. Shouldn't form at least be null but never undefined? That's what my TypeScript type checker says at least. But form being undefined instead of null isn't a big deal at all, it's just curiosity now.

[PxPerfectMike]

Hi Vulcagon,

The behavior you're seeing with form becoming undefined is interesting but not entirely unexpected. Here's what's happening:

In SvelteKit, the form prop is specifically designed to hold the result of form actions. According to the documentation, "each action can respond with data that will be available through the form property on the corresponding page and through page.form app-wide until the next update."

The key phrase here is "until the next update." When you trigger different actions like add or remove that don't explicitly return a value, SvelteKit is actually resetting the form state.

Here's why this happens:

1. When you use the use:enhance action, SvelteKit will "update the form property and $page.form on successful or invalid responses, but only if the action is on the same page where the form is submitted from."

2. If an action doesn't explicitly return a value (or returns undefined/void), the form property will be updated accordingly.

3. When using $props() to access form data, reactivity can behave differently than when directly using export let form.

The reason your TypeScript type checker suggests form should only be null or ActionData is that the type definition for form in SvelteKit's types doesn't include undefined as a possibility. However, in practice, the form value can become undefined during certain transitions or when actions don't explicitly return a value.

To fix this issue in your code, you should:

1. Use type safety with a fallback for undefined values:

const { data, form } = $props();
// Handle both null and undefined cases
if (form === null || form === undefined) {
  // Handle the case
}

2. Make sure your actions are explicitly returning a value (even if it's just { success: true }) to avoid the form property becoming undefined.

This is one of those cases where the runtime behavior doesn't perfectly match what the TypeScript types suggest, which is why you're seeing this discrepancy.

Hope this helps explain the behavior you're seeing!

[Vulcagon]

Thank you very much, it definitely did help. One final question I have is why does an action that doesn't return anything (returns void) cause form from $props to update to null first before it gets updated to undefined immediately afterwards?

[Vulcagon]

Oh I just realized that form is typed as null if you don't have any actions on the server and form is indeed null by default so triggering an action probably resets form to its default value (null) and when the action doesn't return anything (return type void meaning it returns undefined) form gets updated to undefined.