Next.js Discord

Discord Forum

Form action type does not permit a function as the value

Unanswered
Asari posted this in #help-forum
Open in Discord
Avatar
AsariOP
I have following code:

import {signIn} from "@/auth";
import Form from "next/form";

export default function Home() {
    async function submit() {
        "use server";
        await signIn("discord", {redirectTo: "/dashboard", redirect: true})
    }
    return (
        <>
            <h1>Main Page</h1>
            <form action={submit}>
                <button type={"submit"}>Sign In</button>
            </form>
        </>
    );
}


But i get the following error: Type () => Promise<void> is not assignable to type string | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined (see screenshot 1)
I copied the code from a NextJS V14 Project where it worked without any issues, and according to the documentation it should still be an option (https://nextjs.org/docs/app/api-reference/components/form#action-function-props)
The code works when i run npm run dev and does not produce any errors (I'm using turbopack, but it shouldn't affect any of this)
When i use <Form> instead of <form> i get basically the same error Type () => Promise<void> is not assignable to type NonNullable<HTMLFormProps["action"]> (see screenshot 2)

Now my question is, is this a bug, did i set up anything the wrong way or what is up with this?

I am using Webstorm and created the project through the "New Project" with the configuration seen in screenshot 3
Image
Image
Image

1 Reply

Avatar
AsariOP
when i open it in vscode it seems to work