Why is useForm not being recognised as a function

Question

error image

Why am I facing this error when I try to use useForm: ⨯ src\app\journal\page.tsx (18:53) @ useForm ⨯ TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_5__.useForm) is not a function at Page (./src/app/journal/page.tsx:25:105) at stringify () digest: "1374294711" 16 | 17 | const Page = () => {

18 | const { register, handleSubmit, control } = useForm(); | ^ 19 | 20 | const onSubmit = (data) => { 21 | console.log(data)

It is really frustrating because I cant find a solution for it and I have been facing it for more than a day now

import DatePicker from "@/components/DatePicker";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Send } from "lucide-react";
import { useForm, Controller } from "react-hook-form";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { cn } from "@/lib/utils";

const Page = () => {
  const { register, handleSubmit, control } = useForm();

  const onSubmit = (data) => {
    console.log(data)
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="flex flex-col">
        <div>
          <Controller
            name="date"
            control={control}
            render={({ field }) => (
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant={"outline"}
                    className={cn(
                      "w-[280px] justify-start text-left font-normal",
                      !field.value && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {field.value ? (
                      format(field.value, "PPP")
                    ) : (
                      <span>Pick a date</span>
                    )}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar
                    mode="single"
                    selected={field.value}
                    onSelect={field.onChange}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            )}
          />
        </div>
          <input
            {...register("title")}
            name="title"
            type="text"
            placeholder="Title"
            className="border border-gray-300 rounded-md p-2 mt-2"
          />
          <textarea
            {...register("journal")}
            name="journal"
            placeholder="Content"
            className="border border-gray-300 rounded-md p-2 mt-2"
          />
          <Button className="gap-2" type="submit">
            <Send />
            Journal it
          </Button>
        </div>
    </form>
  );
};

export default Page;

I have reinstalled the node modules, tried creating a new project and it would work for a bit after which the error arises again, I did not change anything in the code to cause that.

Answer 1

Try to add "use client"; At the very top of the imports

For more details refers the docs here