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.

Liliana Estefany · Accepted Answer · 2022-07-30 21:40:44Z

15

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

answered Jul 30, 2022 at 21:40

Liliana Estefany

1594 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zied · Accepted Answer · 2023-04-05 11:35:33Z

7

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 .

answered Apr 5, 2023 at 11:35

zied

861 silver badge1 bronze badge

Comments

Tahmid Ali · Accepted Answer · 2022-11-10 05:10:59Z

6

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.

answered Nov 10, 2022 at 5:10

Tahmid Ali

8159 silver badges29 bronze badges

1 Comment

lommaj Over a year ago

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

PP Laru · Accepted Answer · 2024-01-16 22:42:27Z

5

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

answered Jan 16, 2024 at 22:42

PP Laru

1411 gold badge2 silver badges15 bronze badges

1 Comment

Community Over a year ago

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.

Dumbrava Andrei · Accepted Answer · 2023-04-18 18:40:03Z

3

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

answered Apr 18, 2023 at 18:40

Dumbrava Andrei

312 bronze badges

1 Comment

Community Over a year ago

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.

Youssouf Oumar · Accepted Answer · 2023-06-06 15:29:38Z

2

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

edited Jun 6, 2023 at 15:29

answered Jun 10, 2022 at 4:10

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Comments

Michael Bunalski · Accepted Answer · 2024-06-21 12:21:46Z

2

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}/>

}

answered Jun 21, 2024 at 12:21

Michael Bunalski

478 bronze badges

Comments

Abdulamlek · Accepted Answer · 2024-04-17 09:16:27Z

1

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

edited Apr 17, 2024 at 9:16

answered Apr 17, 2024 at 9:14

Abdulamlek

355 bronze badges

Comments

Fatih İnan · Accepted Answer · 2024-11-05 16:47:02Z

1

If you have tried all the ways and it still doesn't work, react-router-dom may have the wrong package.json, you need to check whether a second node_modules is created while creating it. This is the reason why I couldn't solve it for a day. If it was created in the parent folder, after deleting it, go to your own file with 'cd file name' and download it again to package.json.

answered Nov 5, 2024 at 16:47

Fatih İnan

114 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related