Cannot find name 'FieldValues'

Hi everyone…

I’m having a this problem with “React hook library” type called “FieldValues”.
When i {handleSubmit()} data from within <form> it shows no errors.

Please note that “data” has type of “FieldValues

but when i store this logic in separate function “onSubmit” it throws error for the type, even though it has type of “FieldValues”.

Please let me know if i made some error. Thank you. Here is the code:

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

function Form() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: FieldValues) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="mb-3">
        <label htmlFor="name" className="form-label">
          Your Name
      <div className="mb-3">
        <label htmlFor="age" className="form-label">
          Your Age
      <button className="btn btn-primary" type="submit">

export default Form;

Need to import FieldValues from react hook form

import { FieldValues, useForm } from 'react-hook-form';

My notes from this lesson are telling me that FieldValues is the default if we don’t pass a generic type to useForm() like useForm<Person>() but in either case Typescript won’t be able to find it if we don’t import it or declare it in the file where we are using it.

1 Like