Why do I get a "useForm is not a function" error when using React Hook forms in a Next JS project?

[s1egh4rdt]

Hello, I encountered a problem when using React Hook Forms in my Next JS project.

Created a separate file to export the form - LoginForm.tsx

import type {NextPage} from 'next'
import { useForm, SubmitHandler } from "react-hook-form";
import styles from './Auth.module.scss';

interface IFormInput {
  email: string
  password: string
}

export const LoginForm: NextPage = () => {
  const { register, handleSubmit } = useForm<IFormInput>();
  const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data);

  return (
    <div className={styles.formBlock}>
      <h1 className={styles.title}>Login</h1>
      <div className={styles.form_container}>
        <form onSubmit={handleSubmit(onSubmit)}>
            <label htmlFor="email">E-mail</label>
            <input type="email" placeholder="E-mail" 
              {...register('email', {
                required: "Email is required.",
                pattern: {
                  value: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
                  message: "Email must be correctly"
                }
              })}
            />
            <label htmlFor="password">Password</label>
            <input type="password"  
              {...register('password', {
                required: "Password is required..",
              })}
              />
            <input type="submit" />
        </form>
      </div>
    </div>
  )
}

I get an error: Error: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function

I can't figure out what the problem is. Why useForm doesn't work?
I have tried to uninstall the node_modules directory. None of these worked.

[mattsnow]

Hi, just to add to this I have the exact same problem.

I've created a brand new Next JS project and installed React Hook Form. I've copied the default example for Hook Form and nothing else and get this error when rendering:

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

Which then leads to the same error described by OP:

TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function.

This is driving me crazy as I've got a blank, brand new project with everything up to date and I can't even get the example to render. Any ideas? My package.jsoon is below for reference.

{
  "name": "testing",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.49.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

[HugoQueva]

Have you made sure your page.tsx file or component has the "use client" tag at the top of it?

[Moshyfawn]

I've added the 'use client'; line to the top of the component and I continue to get the same error. I've tried removing my node_modules and reinstalling them, same problem.

Take a look at this Next.js codesandbox. If you remove the "use client"; directive from the beginning of the file, you will receive this exact error. There are few other possible causes, except for perhaps a typo. I am not questioning you, but without a reproduction, our guess is as good as anyone else's 😉

[tgandee79]

I'm an idiot. I don't know where I got the idea to write "use-client", but that's what I wrote. I don't know how I didn't see it. I appreciate the response. Back to free-time learning.

[Moshyfawn]

I'm an idiot. I don't know where I got the idea to write "use-client", but that's what I wrote. I don't know how I didn't see it. I appreciate the response. Back to free-time learning.

Haha, I actually made the exact same mistake when I came back to Next.js at one point, and I'm trying to remember what kind of convention or whatever it is that made me add "-" to it, but I can't 🤦

[devDanielCespedes]

I love you

[Pandey-Siddharth]

I also did the same thing and was trying to solve it since past 30 minutes