shadcn-ui を Form を使ったときの TypeError: Cannot destructure property 'getFieldState' of エラー

背景

shadcn-ui の Form コンポーネントを利用してフォームを作成しようとしたときに以下のエラーが発生。

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

useFormContext のデストラクチャリングに失敗しているので <Form> 要素を置き忘れたかと思って確認したもののちゃんと配置済み。

解決方法

結果的には <Form> の import 元が間違っていただけ。
shadcn-ui コンポーネントを import する必要があるところを react-hook-form から インポートしてしまっていた。

// import { Form } from ‘react-hook-form’  →　間違い
import { Form } from "@/components/ui/form”; // 正しくはこちら

Issue のコメントに感謝

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.

参考

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