TypeError: Cannot destructure property 'getFieldState'

[fiqryq]

I encountered an error on my login page, but the same code is working correctly on other pages within my application. I came across a similar issue documented here: Link to GitHub Issue, but I'm still unable to resolve the problem. Can you provide guidance on how to fix this specific error on my login page? Here are the details of the error and the relevant code snippets if it helps."

here my sample code code :

export function InputForm() {
    const { toast } = useToast()

    const FormSchema = z.object({
        username: z.string().min(2, {
            message: "error messages.",
        }),
    })

    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
    })

    function onSubmit(data: z.infer<typeof FormSchema>) {
        toast({
            title: "Title:",
            description: data.username,
            variant: 'default'
        })
    }

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)}>
                <FormField
                    control={form.control}
                    name="username"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Usernae</FormLabel>
                            <FormControl>
                                <Input placeholder="testt" {...field} />
                            </FormControl>
                            <FormDescription>test.</FormDescription>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <Button className="bg-green-600 text-white hover:bg-green-400" type="submit">Submit</Button>
            </form>
        </Form>
    )
}

deps :

{
  "name": "eziswaf",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.1",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-toast": "^1.1.4",
    "@tanstack/react-query": "^4.33.0",
    "@tanstack/react-query-devtools": "^4.33.0",
    "@types/node": "20.5.0",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.268.0",
    "next": "13.4.13",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.4",
    "rgb-hex": "^4.0.1",
    "swiper": "^10.2.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "postcss-nesting": "^12.0.1"
  }
}

[15077693d]

My mistake was that my editor auto imported Form component from react-hook-form when it should have been imported from @/components/ui/form. Hope this helps somebody.

[Jkhall81]

Finally!!! man. I really hate it when these little things mess up what I am working on. Had this same problem. Fixed, thanks!

[sidouglas]

I hit this exact problem this evening - and I'm grateful that I found this, because it can be a time blackhole.
There is a way to prevent ( or remind you ) via eslint.

const config = {
  ...
  rules: {
   ...
    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            importNames: ["Form"],
            message: "Import Form from ui/form instead.",
            name: "react-hook-form",
          },
        ],
      },
    ],
   ...
};

Fiddling with vscode with typescript.preferences.autoImportFileExcludePatterns could be another way ( but CBF'd )