Chakra UI + React Hook Form error wrong Types

Question

I am trying to use ChakraUI and React-Hook-Form to create my form in TypeScript. However, my errors are giving me problems related to typescript it seems. I copy pasted this code from chakra ui/react-hook-form template provided on chakra's website. Here is the code:

import {
  Box,
  Heading,
  FormErrorMessage,
  FormLabel,
  FormControl,
  Input,
  Button,
  Text,
  FormHelperText,
} from '@chakra-ui/react'
import React from 'react'
import styles from '../../theme/styles'
import textStyles from '../../theme/text-styles'
import { useForm } from 'react-hook-form'

const DescribeCargo = () => {
  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm()

  function onSubmit(values: any) {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(JSON.stringify(values, null, 2))
        resolve(values)
      }, 3000)
    })
  }

  return (
    <>
      <Box {...styles.bodyContainer}>
        <Heading {...textStyles.componentHeader} my={7} as='h3'>
          Describe the cargo
        </Heading>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormControl isInvalid={errors.name}>
            <FormLabel htmlFor='name'>First name</FormLabel>
            <Input
              id='name'
              placeholder='name'
              {...register('name', {
                required: 'This is required',
                minLength: { value: 4, message: 'Minimum length should be 4' },
              })}
            />
            <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
          </FormControl>
          <FormControl isInvalid={errors.lastname}>
            <FormLabel htmlFor='lastname'>Last name</FormLabel>
            <Input
              id='lastname'
              placeholder='lastname'
              {...register('lastname', {
                required: 'This is required',
                minLength: { value: 8, message: 'Minimum length should be 8' },
              })}
            />
            <FormErrorMessage>{errors.lastname && errors.lastname.message}</FormErrorMessage>
          </FormControl>
          <Button mt={4} colorScheme='teal' isLoading={isSubmitting} type='submit'>
            Submit
          </Button>
        </form>
      </Box>
    </>
  )
}

export default DescribeCargo

Here are the errors I'm getting:

TS2322: Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'ReactNode'.
  Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'ReactNode'.
    Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is missing the following properties from type 'ReactPortal': key, children, type, props
    48 |               })}
    49 |             />
  > 50 |             <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
       |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    51 |           </FormControl>
    52 |           <FormControl isInvalid={errors.lastname}>
    53 |             <FormLabel htmlFor='lastname'>Last name</FormLabel>

TS2322: Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'boolean | undefined'.
  Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'boolean | undefined'.
    38 |         </Heading>
    39 |         <form onSubmit={handleSubmit(onSubmit)}>
  > 40 |           <FormControl isInvalid={errors.name}>
       |                        ^^^^^^^^^
    41 |             <FormLabel htmlFor='name'>First name</FormLabel>
    42 |             <Input
    43 |               id='name'

Perhaps I could write it without Chakra - however I would like to stick with the theme of this app. I changed the type of errors to any, however it's not helping much.

Answer 1

I had the exact same type issue. I solved this with :

<FormErrorMessage>
    {errors.title && errors.title.message?.toString()}
</FormErrorMessage>