I'm using Shadcn UI to implement a forgot-password form in my Next.js project, but I'm getting this error:

TypeError: Cannot destructure property 'getFieldState' of '(0 , react_hook_form__WEBPACK_IMPORTED_MODULE_4__.useFormContext)(...)' as it is null.

Here is my zod form:

const forgotPasswordFormSchema = z.object({
  email: z.string().email(),
});

const forgotPasswordForm = useForm<z.infer<typeof forgotPasswordFormSchema>>({
  resolver: zodResolver(forgotPasswordFormSchema),
  defaultValues: {
    email: "",
  },
});

And here is my Form html:

<Form {...forgotPasswordForm}>
  <form onSubmit={forgotPasswordForm.handleSubmit(handlePasswordReset)} className="space-y-5">
    <FormField
      control={forgotPasswordForm.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold" htmlFor="email">{messages.yourEmailLabel}</FormLabel>
          <FormControl>
            <Input id="email" type="email" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>

My other Shadcn Form components in my app work just fine, so why is this one getting this error?

I'm using Shadcn UI to implement a forgot-password form in my Next.js project, but I'm getting this error:

TypeError: Cannot destructure property 'getFieldState' of '(0 , react_hook_form__WEBPACK_IMPORTED_MODULE_4__.useFormContext)(...)' as it is null.

Here is my zod form:

const forgotPasswordFormSchema = z.object({
  email: z.string().email(),
});

const forgotPasswordForm = useForm<z.infer<typeof forgotPasswordFormSchema>>({
  resolver: zodResolver(forgotPasswordFormSchema),
  defaultValues: {
    email: "",
  },
});

And here is my Form html:

<Form {...forgotPasswordForm}>
  <form onSubmit={forgotPasswordForm.handleSubmit(handlePasswordReset)} className="space-y-5">
    <FormField
      control={forgotPasswordForm.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold" htmlFor="email">{messages.yourEmailLabel}</FormLabel>
          <FormControl>
            <Input id="email" type="email" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>

My other Shadcn Form components in my app work just fine, so why is this one getting this error?

• forms
• next.js
• shadcnui

1 Answer 1

It turns out I was importing the Form component from react-hook-form when it should have been imported from @/components/ui/form. Changing this import fixed the error.