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

[s1egh4rdt]

Summary

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

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.

Additional information

Code 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>
  )
}

Example

No response

[kerimhudson]

I was trying to figure this out too. Need to set 'use client'

[drew-chidi]

Thank you. I almost cried 😀

[raunak-mishraa]

I spent too much figuring out this but couldn't, thank you so much man! @kerimhudson

[victornwakpa]

Thank you

[DzGooner]

Thank you :)

[manavbabber]

💯

[baramsivaramireddy]

thank you .

[shola-MTN]

yeeeee😫,

[ghost2023]

I was trying to figure this out too. Need to set 'use client'

I face palmed when reading this

[Luyolop1]

here i used "use-client" and still got problem.

'use-client'
import React from 'react';
import { PhoneIcon,EnvelopeIcon,MapPinIcon } from '@heroicons/react/24/solid';
import { useForm, SubmitHandler } from 'react-hook-form';

type Inputs = {
name: string
email: string;
subject: string
message: string
}

type Props = {}

const Contact = (props: Props) => {

const {register,handleSubmit} = useForm()

const onSubmit: SubmitHandler = (formData) => {
window.location.href = mailtoemaildummy@gmail.com?subject=${formData.subject}&body=Hi name is ${formData.name}. ${formData.message} ${formData.email};
}

return (

Contact

  <div className='flex flex-col space-y-10'>
    <h4 className='text-4xl font-semibold text-center'>
        I have got just what you need.{" "}
        <span className='decoration-[#F7AB0A]/50 underline'>Let's talk</span>
    </h4>

    <div className='flex items-center space-x-5 justify-center'>
   <PhoneIcon className='text-[#f7AB0A] h-7 w-7 animate-pulse'/>
        <p className='text-2xl'>+27 60 499 2309</p>
    </div>

    <div className='flex items-center space-x-5 justify-center'>
        <EnvelopeIcon className='text-[#f7AB0A] h-7 w-7 animate-pulse'/>
        <p className='text-2xl'></p>
    </div>
    
    <div className='flex items-center space-x-5 justify-center'>
        <MapPinIcon className='text-[#f7AB0A] h-7 w-7 animate-pulse'/>
        <p className='text-2xl'>Cape Town. 8001</p>
    </div>

  <form onSubmit={handleSubmit(onSubmit)} className='flex flex-col space-y-2 w-fit mx-auto'>
    <div className='flex space-x-2'>
      <input {...register('name')} placeholder="Name" className="contactInput" type="text"/>
      <input {...register('email')}  placeholder="Email"className="contactInput"type="text"/>
    </div>

    <input  {...register('subject')} placeholder="subject"className="contactInput" type='text'/>

    <textarea {...register('message')}  className="contactInput" placeholder='message'/>
    <button className="bg-[#F7AB0A] py-5 px-10 rounded-md text-blank font-bold
    text-lg" type='submit'>Submit</button>
  </form>


  </div>

) }

export default Contact

[bkostrowiecki]

@Luyolop1 You should type use client, not use-client. You don't need to put a hyphen in the middle.

[Walter28]

u saved my 2h of tryin to figure what had goes wrong thx bruhhh

[Luyolop1]

😅what a silly mistake idk where i got that from thank chief.🙏

…

On Tue, 16 Apr 2024 at 01:03, Bartosz Kostrowiecki ***@***.***> wrote: @Luyolop1 <https://github.com/Luyolop1> You should type use client, not use-client. You don't need to put a hyphen in the middle. — Reply to this email directly, view it on GitHub <#59483 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2B2TSS62SENLHNR33PESRTY5RMFJAVCNFSM6AAAAABAPTYQXSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCMRTGQ3TI> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[Luyolop1]

Thank you brother

…

On Wed, 17 Apr 2024 at 16:24, Muhammad Najeeb Yusuf < ***@***.***> wrote: You saved me a lot of time Thanks — Reply to this email directly, view it on GitHub <#59483 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2B2TSX2TRWZZVIL22LYR23Y52AZXAVCNFSM6AAAAABAPTYQXSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCNBTHA3TK> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[bryandandan]

For me, even with 'use client' at the top, it's not working :(
const [form] = Form.useForm() is breaking my next js build

[simsketch]

Same, pretty much boilerplate code too.

[Jore]

I'm having the same problem. Very frustrating.

[bkostrowiecki]

What library are you using here?

[mdmahfuzrp]

In NextJS 14, when using useForm from React Hook Form, the component must be marked as a client component. To ensure this, add "use client"; at the top of your file. This directive ensures that the component is rendered on the client side, which is necessary for React Hook Form to function correctly.