Как использовать yup с формой react hook?

#reactjs #react-hooks #yup

#reactjs #реагирующие хуки #да

Вопрос:

Я пытаюсь написать обработку ошибок в форме react hook с помощью yup, но когда я хочу передать распознаватель, как указано в документации (https://www.npmjs.com/package/@hookform/resolvers ) Я получаю эту ошибку:

Ошибка синтаксиса: невозможно использовать оператор import вне модуля

module.exports = требовать («@hookform/resolvers/yup»);

Моя схема проверки:

 const schema = Yup.object().shape({
  person: Yup.string()
    .min(3, "To pole jest za krótkie")
    .max(30, "To pole jest za długie")
    .required("To pole jest wymagane"),
});
 

Форма React hook:

 const {
    register,
    errors,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm({ resolver: yupResolver(schema) });
 

Импортирует:

 import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from "yup";
 

Версия Npm:

 "react-hook-form": "^6.15.1",
"yup": "^0.28.3"
"@hookform/resolvers": "^1.3.4",
 

Ответ №1:

Это ошибка react-hook-form . https://github.com/react-hook-form/resolvers/issues/107

Единственное исправление на сегодняшний день, если вы используете react-hook-form v6, — это понизить @hookform/resolvers 1.3.0 или использовать бета-версию 2.0.0-beta.3 . Более новые версии поддерживают только react-hook-form v7.