React Hook Form中useForm未被识别为函数的报错求助

错误信息 #

运行代码时触发如下错误：

⨯ src\app\journal\page.tsx (18:53) @ useForm
⨯ TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_5__.useForm) is not a function
at Page (./src/app/journal/page.tsx:25:105)
at stringify ()
digest: "1374294711"

对应代码行：

18 | const { register, handleSubmit, control } = useForm();
| ^

已尝试操作 #

• 重装node_modules
• 创建新项目能暂时运行，但无代码修改情况下错误复现

完整代码 #

import DatePicker from "@/components/DatePicker";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Send } from "lucide-react";
import { useForm, Controller } from "react-hook-form";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { cn } from "@/lib/utils";

const Page = () => {
  const { register, handleSubmit, control } = useForm();

  const onSubmit = (data) => {
    console.log(data)
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="flex flex-col">
        <div>
          <Controller
            name="date"
            control={control}
            render={({ field }) => (
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "w-[280px] justify-start text-left font-normal",
                      !field.value && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {field.value ? (
                      format(field.value, "PPP")
                    ) : (
                      <span>Pick a date</span>
                    )}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar
                    mode="single"
                    selected={field.value}
                    onSelect={field.onChange}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            )}
          />
        </div>
          <input
            {...register("title")}
            name="title"
            type="text"
            placeholder="Title"
            className="border border-gray-300 rounded-md p-2 mt-2"
          />
          <textarea
            {...register("journal")}
            name="journal"
            placeholder="Content"
            className="border border-gray-300 rounded-md p-2 mt-2"
          />
          <Button className="gap-2" type="submit">
            <Send />
            Journal it
          </Button>
        </div>
    </form>
  );
};

export default Page;

解决步骤 #

1. 锁定最新稳定版依赖 #

执行命令安装React Hook Form最新稳定版，确保和Next.js App Router兼容：

npm install react-hook-form@latest
# yarn用户执行：yarn add react-hook-form@latest

2. 清理缓存 #

Next.js缓存可能导致模块加载异常，执行以下命令清理后重启：

# 删除Next.js缓存目录
rm -rf .next
# 清除npm缓存
npm cache clean --force
# 重新安装依赖并启动
npm install && npm run dev

3. 检查模块导入配置 #

查看项目的tsconfig.json或jsconfig.json，确认paths配置没有错误映射react-hook-form路径，确保模块从node_modules正确导入。

4. 排查重复依赖 #

检查项目是否存在多个package.json文件（比如子目录下的），导致依赖重复安装。删除多余的package.json和对应的node_modules，重新在根目录安装依赖。

5. 尝试修改导入方式（备选） #

若ESModule导入存在问题，临时改用全量导入排查：

import * as ReactHookForm from 'react-hook-form';
const { useForm, Controller } = ReactHookForm;

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