react-hook-form resolver type error using Yup

Question

I'm creating an auth form and I'm referencing the react-hook-form docs on how to use yup to validate my inputs. As far as I can tell, everything is pretty much identical to the implementation provided in the docs. However, I'm getting the error on the useForm resolver (show below). Any idea where I'm going wrong?

• "react-hook-form": "^7.15.2"
• "yup": "^0.32.9"
• "@hookform/resolvers": "^2.8.1"

error

code

interface IFormInputs {
  email: string;
  password: string;
  passwordConfirm: string;
}

const schema = yup.object().shape({
  email: yup.string().required(),
  password: yup.string().required(),
  passwordConfirm: yup.string().required(),
});

const SignUp = (): JSX.Element => {
  const {
    control,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<IFormInputs>({ resolver: yupResolver(schema) });

  const onSubmit: SubmitHandler<IFormInputs> = () => {
    const values = getValues();
    console.log('values', values);
  };

  return (
    <div>
      <StyledPaper>
        <StyledTypography>Sign Up</StyledTypography>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Controller
            name="email"
            rules={{ required: 'this field is required' }}
            defaultValue=""
            control={control}
            render={({ field }) => (
              <TextField
                fullWidth
                label="Email"
                variant="filled"
                value={field.value}
                error={!!errors.email}
                helperText="Provide an email"
                {...field}
              />
            )}
          />
          <StyledButton type="submit">Submit</StyledButton>
        </form>
      </StyledPaper>
      <div>
        <StyledTypography>Already have an account? Log in.</StyledTypography>
      </div>
    </div>
  );
};

export default SignUp;

Hillard

Answer 1

This looks like a library bug, downgrade @hookform/resolvers to 2.8.0 seems to fix the issue.

Edit: You can remove the error on version 2.8.1 by forcing yubResolver to use the yub.AnyObjectSchema generic. Thanks to Mihai-github for figuring that out.

useForm<IFormInputs>({
  resolver: yupResolver<yup.AnyObjectSchema>(schema),
});

Herbalist

Attempted import error: 'AnyObjectSchema' is not exported from 'yup' (imported as 'yup') this error is showing, what to do? @Nearhuscarl – Reactant

@ShubhamSinghvi what yup/resolver versions are you using? – Herbalist

@hookform/[email protected] [email protected] [email protected] it is. – Reactant

Thank you!! You just helped me so much after hours of giving myself a headache! – Gremial

Answer 2

useForm<IFormInputs>({
  resolver: yupResolver<IFormInputs>(schema),
});

No need to add any Yup Schema type, simply pass useForm<interface/type> to yupResolver<interface/type>.

Note. Make sure the schema should contain the same keys as interface/type

Stevenson

Doesn't work for me – Tideway

Answer 3

You can fix them like this: resolver: yupResolver<yup.AnyObject>(schema),

Pacer

Does not work for me. Nor does resolver: yupResolver<yup.AnyObjectSchema>(schema) – Tideway

Answer 4

None of the answers above work for me. And I don't want to downgrade @hookform/resolvers to a 2+ year version as said by NearHuscarl. The work around is to silence the error by adding // @ts-expect-error ts(2322) on the line before the error occurs. In your case, before the line resolver: yupResolver(schema),.

Tideway

Answer 5

I had the same issue and fixed it by upgrading to the latest versions of each libs:

"@hookform/resolvers": "3.3.1",
"react-hook-form": "7.51.2",
"yup": "1.4.0"

also, if you had @types/yup installed, you should remove it as yup now exposes its own types and may interfere with the lib's types.

Edit : note, as from a recent Github post there seems to be an issue with @hookform/resolvers after version 3.3.1

Note that I'm on typescript 5.3.3

Anestassia