Next.js中react-hook-form的useForm导入错误求助

问题场景 #

使用环境：Next.js 14.2.9、react-hook-form 7.53.0

编写代码如下：

import { useForm } from 'react-hook-form';

export default function Register() {
  const { register, handleSubmit, formState: { errors } } = useForm();

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

运行后出现错误：

Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

解决方案 #

• 重新安装指定版本的依赖包
  先卸载现有包再重新安装，确保包文件无损坏、版本匹配：

  # npm
  npm uninstall react-hook-form && npm install react-hook-form@7.53.0
  # yarn
  yarn remove react-hook-form && yarn add react-hook-form@7.53.0
  # pnpm
  pnpm remove react-hook-form && pnpm add react-hook-form@7.53.0
  

• 清除Next.js缓存
  Next.js的缓存可能导致模块解析异常，执行命令清除缓存后重启开发服务：

  npx next dev --clear-cache
  

• 检查依赖包名拼写
  确认package.json中依赖的包名是react-hook-form，避免安装了类似react-hooks-form的错误包。

• 重置依赖环境
  若上述步骤无效，可删除node_modules文件夹和对应的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），然后重新安装所有依赖。

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