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.

Janellajanelle

Answer 1

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 .

Serica

It works, thanks for saving my day! npm i react-router-dom – Affusion

Answer 2

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

Docila

Answer 3

I am putting this answer for them who recently started working with Next.js 13.

I faced this problem while using react-hook-form with Next.js 13 release. I had following configuration:

const nextConfig = {
  experimental: {
    appDir: true,
  },
}

After changing the appDir value to false, the problem goes away.

Carbonari

youre a life saver for posting this after you figured it out. – Surfeit

Answer 4

Solved this problem by removing node_modules + .next folders. I installed the dependencies again + npm run dev and it worked.

Tomboy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Archdeaconry

Answer 5

First of all, look inside your package.json file to make sure every used library is listed either as "dependencies" or devDependencies. If not, install them individually.

For example, since you are using in your codebase react-hook-form, if you are not seeing it, open a terminal in the root folder of your project where package.json is, and run:

npm install react-hook-form

If the issue persists, make sure your Node.js version is not superior to the last recommended one. If not, downgrade it, and for that, you could use n package from npm:

# Use the stable version of Node.js
npm i -g n
n stable
# If one of the above commands does not pass, you may need to use sudo:
sudo npm i -g n
sudo n stable
# Then delete node_modules and start over
rm -rf node_modules
npm install

Gasify

Answer 6

Just wanted to add that I had this error and realized I was calling useRef outside of the component. Don't forget that you cannot call hooks outside of a functional component

Gnomic

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Archdeaconry

Answer 7

Happened to me, make sure that react-hook-form is installed in the same directory of the project.

Enchanter

Answer 8

Make sure you are using this within the function for the component not the whole file. Probable seems silly but that was my issue.

import {useRef} from 'react';

const testRef = useRef(); //<==== not here

function refUsage (){

    const testRef = useRef(); //<==== here

    <input ref={testRef}/>

}

Sexagenary