import { useForm } from 'react-hook-form';
export default function Register() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = async (data) => {
console.log(data);
};
With this code I am getting error
Attempted import error: ‘useForm’ is not exported from ‘react-hook-form’ (imported as ‘useForm’).
I am using nextjs 14.2.9 and react-hook-form 7.53.0.
Add 'use client' at the top of your file. Find more details about Client components in NextJs here.
'use client'
import { useForm } from 'react-hook-form';
export default function Register() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = async (data) => {
console.log(data);
};
Your code is correct. But make sure you put the 'use client' in top of your component because you are working with client events in your form.
If the problem didn’t solve:
I think the problem is related to your third party package installation.
-
First of all uninstall your react hook form
-
Then install it with
npmoryarn.
make sure your network connection works well (and if you are under VPN, turn it off)
- Finally clear your npm cache with this command
npm cache clean --force
Run your application again and check for the result. If you see the react-hook-form’s github, there is useForm.ts file and exported well.