Почему возникает ошибка «useForm is not a function» при использовании React Hook Forms в проекте Next JS?

Question

[r4gn4r0k]

Здравствуйте столкнулся с проблемой при использовании React Hook Forms в своем проекте на Next JS.

Создал отдельный файл для экспорта формы - LoginForm.tsx

import type {NextPage} from 'next'
import { useForm, SubmitHandler } from "react-hook-form";
import styles from './Auth.module.scss';

interface IFormInput {
  email: string
  password: string
}

export const LoginForm: NextPage = () => {
  const { register, handleSubmit } = useForm<IFormInput>()
  const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data)

  return (
    <div className={styles.formBlock}>
      <h1 className={styles.title}>Вход в личный кабинет</h1>
      <div className={styles.form_container}>
        <form onSubmit={handleSubmit(onSubmit)}>
            <label htmlFor="email">E-mail</label>
            <input type="email" placeholder="E-mail" 
              {...register('email', {
                required: "Email - обязательное поле.",
                pattern: {
                  value: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
                  message: "Введите корректный email"
                }
              })}
            />
            <label htmlFor="password">Пароль</label>
            <input type="password"  
              {...register('password', {
                required: "Пароль - обязательное поле.",
              })}
              />
            <input type="submit" />
        </form>
        
        <div className={styles.switch_sign}>
          <p>У меня нет аккаунта</p>
          <a href="/register">Зарегистрироваться</a>
        </div>
        <div className={styles.policy}>Нажимая кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности сайта</div>
      </div>
    </div>
  )
}

Но при запуске выходит такая ошибка:
Unhandled Runtime Error
Error: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function


Как исправить?
P.S. Удаление node_modules и переустановка (npm i) не помогла устранить ошибку

Answer 1

[shevdary]

https://github.com/vercel/next.js/discussions/5948... мне вот это помогло

Comments

[r4gn4r0k]

Да. Мне тоже. Это кстати моя тема тоже. Создал несколько обсуждений на GitHub (в Next.js, в React Hook Form)