TypeError: Cannot read properties of null (reading 'useRef')

Question

I'm using Next.js, TypeScript, sanity and tailwindcss. Im trying to use the react-hook-form but i receive an error.

I've tried:

• changing the Post function to an arrow function
• changing the Post function to a const function
• changing the IFormInput interface to a type

This is where the error is:

  23 |      formState: { errors },
> 24 |  } = useForm<IFormInput>();
     |            ^
  25 | 
  26 |  return (
  27 |      <main>

And this is my code ([slug].tsx) in the pages folder:

import { useForm, SubmitHandler } from "react-hook-form";

interface IFormInput {
    _id: string;
    name: string;
    email: string;
    comment: string;
}

function Post({ post }: Props) {
 const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>();

 return (
  <form>
   <input {...register("_id")} type="hidden" name="_id" value={post._id} />
   <input {...register("name", { required: true })} type="text"/>
   <input {...register("email", { required: true })} type="text" />
   <textarea {...register("comment", { required: true })} />            
   {errors.name && (<span>- The Name Field is required</span>)}
   {errors.comment && ( <span>- The Comment Field is required</span>)}
   {errors.email && ( <span>- The Email Field is required</span>)}
   <input type="submit" />
  </form>
 );
}

Any assistance is greatly appreciated.

Answer 1

I had the same error bc I don't install 'React Hook Form' in the correct folder, make sure it is in your package.json

Answer 2

just verify your react-router-dom . i already installed it and my app was working perfectly but after some days i got this error so i verified my package.json and didnt find the react-router-dom dependency so try npm i react-router-dom again .