Error: Export useForm doesn't exist in target module

Question

I am trying to use react-hook-form in my nextjs component with shadcnUI Form. But the error that I am having is :

Export useForm doesn't exist in target module 23 | FormMessage, 24 | } from "@/components/ui/form"; 25 | import { useForm } from "react-hook-form"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 26 | const formSchema = z.object({ 27 | email: z.string().min(2).max(50), 28 | password: z.string().min(2).max(50),

I've installed react-hook-form already and followed the documentation that is given in shadcn's form component section.

still I am having this error:

The export useForm was not found in module [project]/node_modules/.pnpm/[email protected][email protected]/node_modules/react-hook-form/dist/react-server.esm.mjs [app-rsc] (ecmascript). Did you mean to import set? All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.

Answer 1

I had the same issue, trying to use useForm hook inside React Server Component. React hooks work only in Client Components.

Just make your component a Client Component by adding "use client" at the top of your file, like this:

  "use client";
  // rest of your imports...