reactjsnext.jsform-submitonsubmitserver-action

NextJS 14 server action throwing "cannot redefine property" error


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.


Solution

  • 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!!