How can I import ActionData?

38 Views Asked by At

I'm evaluating Svelte for a project, and I'm stuck on importing ActionData; here's the error:

Module '"./$types"' has no exported member 'ActionData'.

Here's how I'm trying to import it, in a +page.svelte:

    import type { ActionData } from './$types';

    export let form: ActionData;

Here's my form, in that same page:

    <form on:submit={loginWithEmail}>
        {#if form?.wrongPassword}<p class="error">Wrong password.</p>{/if}
        {#if form?.missingPassword}<p class="error">Missing password.</p>{/if}
        {#if form?.invalidEmail}<p class="error">Malformed email.</p>{/if}
        {#if form?.unknown}<p class="error">Authentication error.</p>{/if}

        <input bind:value={email} type="text" placeholder="Email" />
        <input bind:value={password} type="password" placeholder="Password" />
        <button type="submit">Login</button>
    </form>

Here's the function called by that form; it calls fail in an attempt to make authentication failures visible to the form variable:

    async function loginWithEmail() {
        await signInWithEmailAndPassword(auth, email, password)
            .then((result) => {
                const { user }: UserCredential = result;
                session.set({
                    loggedIn: true,
                    user: {
                        displayName: user?.displayName,
                        email: user?.email,
                        photoURL: user?.photoURL,
                        uid: user?.uid
                    }
                });
                goto('/');
            })
            .catch((error) => {
                var code = error.code;
                if (!!code) {
                    console.log(`auth error '${code}'`);
                    if ('auth/wrong-password' === code) {
                        return fail(400, { email, wrongPassword: true });
                    } else if ('auth/missing-password' === code) {
                        return fail(400, { email, missingPassword: true });
                    } else if ('auth/invalid-email' == code) {
                        return fail(400, { email, invalidEmail: true });
                    }
                }
                return fail(400, { email, unknown: true });
            });
    }

Here are the contents of the generated $types.d.ts for this page:

import type * as Kit from '@sveltejs/kit';

type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
// @ts-ignore
type MatcherParam<M> = M extends (param: string) => param is infer U ? U extends string ? U : string : string;
type RouteParams = {};
type RouteId = '/login';
type MaybeWithVoid<T> = {} extends T ? T | void : T;
export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
type EnsureDefined<T> = T extends null | undefined ? {} : T;
type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
export type Snapshot<T = any> = Kit.Snapshot<T>;
type PageParentData = EnsureDefined<import('../$types.js').LayoutData>;

export type PageServerData = null;
export type PageData = Expand<PageParentData>;

When looking into this error, I read that form is a keyword that should be available without importing the ActionData type, but export let form; yielded a null form value.

How can I get access to the form variable here? And why isn't this working for me?

0

There are 0 best solutions below