CODEWITHSUNDEEP
reactjsnext.jsuse-form
Nathaniel Ekanem
Nathaniel Ekanem

Reputation: 31

useForm and react-hook-form is giving problems with I use it with NextJs

I'm coding in NextJs and I needed to use 'useForm' but it keeps giving constant errors... "Cannot resolve 'react-hook-form'."Please help.

import React from "react";
import { useForm } from "react-hook-form";

function Presignup() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm;
  const submitHandler = (i) => {
    {
      console.log(i);
    }
  };

Upvotes: 3

Views: 19986

Answers (5)

Arman Bhatia
Arman Bhatia

Reputation: 11

Just add "use client" a the top of the file.

'use client'
import React from "react";
import { useForm } from "react-hook-form";

function Presignup() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm;
  const submitHandler = (i) => {
    {
      console.log(i);
    }
  };

Upvotes: 1

Abid Ibn Azam
Abid Ibn Azam

Reputation: 1

To use React Hook form in next js, you need to create a component and import that component in you page.jsx. In my case I'm using next.js app route and for a signup functionality I've created a component name as Login.jsx(you can name whatever you want) and import that in your login route, for Example import the login.jsx in Login/page.jsx.

Important Note: define the component and page as 'user client' at the top of the file. In mycase I've used 'user client' in my Login.jsx component and Login/page.jsx file.

Upvotes: 0

Kassio
Kassio

Reputation: 29

I had the same problem, and i found the solution, try this:

  1. Uninstall the node_modules
  2. After uninstall, paste npm i in your terminal
  3. Enjoy :)

If the same problem continues after following my steps, try reinstalling Node.js

Upvotes: 1

Jonathan Mark Mwigo
Jonathan Mark Mwigo

Reputation: 145

maybe am late to answer this get the version of react-hook-form you installed using

npm install react-hook-form

in my case it is version 7.34.2

in your project's root directory... open package.json and into the dependencies object, add

"react-hook-form": "7.34.2"

then run npm install in teminal on your project's root directory

this worked for me

Upvotes: 7

Michael Harley
Michael Harley

Reputation: 1048

this should be quite simple, try this solution:

  1. Try to go to package.json, see if you already have react-hook-form library in it.

if you do have it:

  1. run yarn or npm install on your directory terminal

if you don't have it:

  1. run yarn add react-hook-form or npm install react-hook-form

Upvotes: 1

Related Questions