NextJS 14 Server Action触发‘Cannot redefine property’错误排查

你遇到的这个错误核心原因是Server Action文件同时混用了命名导出和默认导出。Next.js在处理Server Action时，会自动给函数注入内部标识属性（比如$$id），混合两种导出方式会触发属性重定义的冲突。

第一步：修正Server Action的导出方式 #

修改app/actions/login.ts，只保留一种导出方式，删除多余的默认导出：

"use server"

export const login = (values: any) => {
  console.log(values)
}
// 移除这行：export default login

第二步：正确绑定表单提交逻辑 #

你的表单还没和react-hook-form的验证逻辑关联，调整LoginForm.tsx的提交处理，同时给输入框绑定表单字段：

"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: "",
    },
  })

  // 用handleSubmit包裹，获取验证后的表单值
  const onSubmit = form.handleSubmit(async (values) => {
    await login(values)
  })

  return (
    <form className="space-y-6" onSubmit={onSubmit}>
      {/* 绑定react-hook-form的register，确保能获取输入值 */}
      <Input 
        placeholder="john.doe@email.com" 
        type="email" 
        {...form.register("email")} 
      />
      <Input 
        placeholder="********" 
        type="password" 
        {...form.register("password")} 
      />
      <Button type="submit" className="w-full">
        Login
      </Button>
    </form>
  )
}

额外注意事项 #

• 调用Server Action时建议用async/await包裹，确保异步逻辑正确执行
• 单个Server Action文件尽量只导出一个函数，避免多函数导出导致的内部标识冲突
• 客户端组件中调用Server Action无需额外配置跨域，Next.js会自动处理前后端通信

内容的提问来源于stack exchange，提问作者Ubiquitous Ubuntu