I am working on a NextJS 14 project and struggling to implement the new server action feature introduced my NextJS some time back as an alternative to regular API calls. Here’s a stripped-down version of my LoginForm.tsx
file:
"use client"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import CardWrapper from "@/components/auth/CardWrapper"
import { LoginSchema } from "@/schemas"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { login } from "@/app/actions/login"
export default function LoginForm() {
const form = useForm<z.infer<typeof LoginSchema>>({
resolver: zodResolver(LoginSchema),
defaultValues: {
email: "",
password: "",
},
})
function doSomething() {
login("test")
}
return (
<form className="space-y-6" onSubmit={doSomething}>
<Input placeholder="john.doe@email.com" type="email" />
<Input placeholder="********" type="password" />
<Button type="submit" className="w-full">
Login
</Button>
</form>
)
}
Here, I am importing an actions/login.ts
file with the use server
directive to serve as a server-side recipient of the form’s payload:
"use server"
export const login = (values: any) => {
console.log(values)
}
export default login
When executed, the form’s submit action triggers a doSomething()
method that sends a simple string to the server-side function at actions/login.ts
, which should trigger a server-side console log()
of the passed string. But it throws this error instead:
TypeError: Cannot redefine property: $$id at Function.defineProperties () at eval (./src/app/actions/login.ts:22:81) at (action-browser)/./src/app/actions/login.ts (C:\Users\91877\Documents\Project\poco.next\server\app\auth\login\page.js:399:1) at Function.webpack_require (C:\Users\91877\Documents\Project\poco.next\server\webpack-runtime.js:33:42)
What could I possibly be missing here?
I was expecting a console.log of the string value "test" on the server terminal.
This issue is discussed here in Github.
Looks like you need
"use server"
export const login = (values: any) => {
console.log(values)
}
export default login
change to
"use server"
const login = (values: any) => {
console.log(values)
}
export default login
Hope this works for you!!