Form action expects a string?

Sorry to paste an image but it's necessary to see the error - this component keeps giving me the problem that "action expects a string" - why?!?!
1 Reply
mansavesbabyweldedtocar
export default function SignUp() {
async function signUp(data : any) {
'use server'
console.log(data);

}

return (
<div className="login-container h-full w-full">
<div className="login-form mx-auto max-w-min" >
<form action={signUp}>
<input className="block login-field my-4 px-4 rounded-md font-bold text-center py-2" type="text" placeholder="Email" maxLength={30} required></input>
<input className="block login-field my-4 px-4 rounded-md font-bold text-center py-2" type="password" placeholder="Password" maxLength={30} required></input>
<input className="block login-field my-4 px-4 rounded-md font-bold text-center py-2" type="password" placeholder="Confirm Password..." maxLength={30} required></input>
<button className="login-button w-full block rounded-sm mx-auto text-center py-2 text-2xl"> Sign In</button>
</form>
</div>

</div>)
}
export default function SignUp() {
async function signUp(data : any) {
'use server'
console.log(data);

}

return (
<div className="login-container h-full w-full">
<div className="login-form mx-auto max-w-min" >
<form action={signUp}>
<input className="block login-field my-4 px-4 rounded-md font-bold text-center py-2" type="text" placeholder="Email" maxLength={30} required></input>
<input className="block login-field my-4 px-4 rounded-md font-bold text-center py-2" type="password" placeholder="Password" maxLength={30} required></input>
<input className="block login-field my-4 px-4 rounded-md font-bold text-center py-2" type="password" placeholder="Confirm Password..." maxLength={30} required></input>
<button className="login-button w-full block rounded-sm mx-auto text-center py-2 text-2xl"> Sign In</button>
</form>
</div>

</div>)
}
Warning: Invalid value for prop `action` on <form> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
Warning: Invalid value for prop `action` on <form> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
^ That is what I get as a runtime error. Mkay so my packages were way out of date in a specific repo. My bad.
npm uninstall next
npm uninstall @types/react-dom
npm uninstall @types/react

npm install next
npm install @types/react-dom
npm install @types/react
npm uninstall next
npm uninstall @types/react-dom
npm uninstall @types/react

npm install next
npm install @types/react-dom
npm install @types/react
did the trick