React-Hook-Form useForm is not a function

Question

I am using NextJS 14 and React Hook Form and I keep running in this error.

I used the guide from the official docs and nothing worked.

I have tried uninstall react hook form and reinstalling it, also attempted to delete package-lock.json and node_modules.

export default function Home() {
  const {
    register,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(UserSchema), // Apply the zodResolver
  });

  return (
      <form onSubmit={() => {}}>
        <div className="grid col-auto">
          <FormField
            type="email"
            placeholder="Email"
            name="email"
            register={register}
            error={errors.email}
          />
          <button type="submit">
            Submit email
          </button>
        </div>
      </form>
  );
};

Answer 1

Add "use client" at the very top of your component.

"use client"

export default function Home() {
  const {
    register,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(UserSchema), // Apply the zodResolver
  });

  return (
      <form onSubmit={() => {}}>
        <div className="grid col-auto">
          <FormField
            type="email"
            placeholder="Email"
            name="email"
            register={register}
            error={errors.email}
          />
          <button type="submit">
            Submit email
          </button>
        </div>
      </form>
  );
};

Answer 2

In NextJS 14, when using useForm from React Hook Form, the component must be marked as a client component. To ensure this, add "use client"; at the top of your file. This directive ensures that the component is rendered on the client side, which is necessary for React Hook Form to function correctly.