Next.js14中useForm模块找不到问题的解决方法求助

一、排查依赖安装与版本兼容 #

• 确保react-hook-form和@hookform/resolvers版本匹配：react-hook-form v7需要搭配@hookform/resolvers v2+，不要混用v6版本。执行以下命令安装最新兼容版本：

  npm install react-hook-form@latest @hookform/resolvers/zod@latest
  

• 检查package.json文件，确认这两个包已正确添加到依赖列表中，版本无冲突。

二、修复模块导入与项目配置 #

• 确认导入路径正确：你的代码中import { useForm } from "react-hook-form"写法无误，若为TypeScript项目，检查tsconfig.json的moduleResolution设置为NodeNext或Node16，确保模块解析正常。
• 重启Next.js开发服务器并清除缓存：

  npm run dev -- --clear-cache
  

  （注：你已添加"use client"指令，这部分没问题，但缓存可能导致模块未正确加载）

三、正确使用FormField/Controller组件 #

你的代码中<FormField />未配置必要属性，导致无法正常工作。以下是正确用法示例：

使用shadcn/ui的FormField（推荐） #

<FormField
  control={form.control}
  name="name"
  render={({ field, fieldState }) => (
    <div className="space-y-2">
      <label htmlFor="name" className="text-sm font-medium">服务器名称</label>
      <input
        id="name"
        type="text"
        {...field}
        disabled={isLoading}
        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      {fieldState.error && (
        <p className="text-red-500 text-xs">{fieldState.error.message}</p>
      )}
    </div>
  )}
/>

<FormField
  control={form.control}
  name="imageUrl"
  render={({ field, fieldState }) => (
    <div className="space-y-2">
      <label htmlFor="imageUrl" className="text-sm font-medium">服务器图片链接</label>
      <input
        id="imageUrl"
        type="text"
        {...field}
        disabled={isLoading}
        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      {fieldState.error && (
        <p className="text-red-500 text-xs">{fieldState.error.message}</p>
      )}
    </div>
  )}
/>

直接使用react-hook-form的Controller #

若需手动使用Controller，先导入：

import { useForm, Controller } from "react-hook-form"

再按如下方式使用：

<Controller
  control={form.control}
  name="name"
  render={({ field, fieldState }) => (
    <div className="space-y-2">
      <label htmlFor="name">服务器名称</label>
      <input
        id="name"
        type="text"
        {...field}
        disabled={isLoading}
      />
      {fieldState.error && <p className="text-red-500 text-xs">{fieldState.error.message}</p>}
    </div>
  )}
/>

四、清除缓存重新构建 #

若以上步骤无效，尝试彻底清除依赖缓存：

rm -rf node_modules package-lock.json
npm install

之后重新启动开发服务器。

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