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

user_18434293 0
Viewed 4104

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.

react-hook-form typescript next.js reactjs
2 Answers

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

user_190692000

Look inside package.json to make sure every used library is listed either as "dependencies" or devDependencies. If not install them individually.

Then make sure your node.js version is not superior than the recommended one. If not downgrade it, and for that you coud use n package from npm:

# if one of the commands does not pass, you may need to precede them with sudo
npm i -g n
n stable
# delete everything and start over
rm -rf node_modules package-lock.json yarn.lock
npm install
user_152886410
Related