How to resolve the error: Module '"react-hook-form"' has no exported member &#03-CodePudding

I want to make simple login page using react-hook-form

I get this error:

Module '"react-hook-form"' has no exported member 'useForm'

import React from 'react';
import { Box, TextField } from '@mui/material';
import { SubmitHandler, useForm } from 'react-hook-form';

type InputForm = {
  email: string,
  password: string
}

const Login = () => {
  const { register, handleSubmit } = useForm<InputForm>();
  const onSubmit: SubmitHandler<InputForm> = (data: any) => console.log(data)

  return (
    <Box>
      <form onSubmit={handleSubmit(onSubmit)}>
        <TextField label="email" {...register("email")} />
        <TextField label="email" {...register("password")} />
      </form>
    </Box>
  )
}

export default Login

this code give me the following error

TS2305: Module '"react-hook-form"' has no exported member 'useForm'.
    1 | import React from 'react';
    2 | import { Box, TextField } from '@mui/material';
  > 3 | import { SubmitHandler, useForm } from 'react-hook-form';
      |                         ^^^^^^^

but when i use simple js file it`s work normally

CodePudding user response：

the typescript version you are using in your project could be the source of the error since react-hook-form said :

Important: Typescript ^4.3 above is the recommended version to work with react hook form. https://react-hook-form.com/ts/

here I tried your code and it is not showing that error https://codesandbox.io/s/compassionate-sea-z5sx9u?file=/src/App.tsx

you can have a look at versions used in package.json https://codesandbox.io/s/compassionate-sea-z5sx9u?file=/package.json