NextJS+shadcnUI中react-hook-form的useForm导出不存在错误

• 核心报错：Export 'useForm' doesn't exist in target module
• 对应代码片段：

23 |   FormMessage,
24 | } from "@/components/ui/form";
25 | import { useForm } from "react-hook-form";
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
26 | const formSchema = z.object({
27 |   email: z.string().min(2).max(50),
28 |   password: z.string().min(2).max(50),

• 详细错误提示（翻译后）：

模块 [project]/node_modules/.pnpm/react-hook-form@7.56.1_react@19.1.0/node_modules/react-hook-form/dist/react-server.esm.mjs [app-rsc] (ecmascript) 中未找到导出的useForm。
你是不是想导入set？
该模块的所有导出都是静态已知的（它没有动态导出）。因此可以静态确认请求的导出不存在。

问题根源 #

Next.js App Router默认将组件视为服务器组件（RSC），而useForm是react-hook-form提供的客户端钩子，只能在客户端组件中使用，直接在服务器组件中导入会触发上述错误。

具体修复步骤 #

1. 标记组件为客户端组件
   在组件文件的最顶部添加'use client'指令，强制Next.js将该组件作为客户端组件处理：

'use client'; // 必须放在文件第一行，任何导入之前

import { Form, FormInput, FormLabel, FormMessage } from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { z } from "zod";

// 后续组件逻辑...

2. 验证依赖兼容性（可选）
   当前使用的react-hook-form@7.56.1已兼容React 19，若仍有异常，可尝试升级到最新稳定版：

pnpm add react-hook-form@latest

3. 确认导入正确性
   确保useForm的导入路径无误，正确写法为import { useForm } from "react-hook-form"，无需修改。

内容的提问来源于stack exchange，提问作者Fakhrul Islam Fuad