Astro で Shadcn の Form を使ったコンポーネントを client:only すると描画されない

背景

Astro でフォームコンポーネントを作る際、 Shadcn の Form を使用していました。
また、バリデーションでは React Hook Form を使っていたため、 Astro 側では client:only をつけて呼び出していました。
しかし、 astro dev で開発環境を起動して、ページにアクセスするとフォームコンポーネントが表示されず、
デベロッパーツールのコンソールに以下のエラーメッセージが表示されていました。

> SyntaxError: The requested module '/node_modules/.vite/deps/react-hook-form.js?v=39dcd9db' does not provide an export named 'ControllerProps'

解決法

Shadcn が生成する form.tsx（src/components/ui/form.tsx）のインポートを以下のように修正する。

元のソースコード

import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

修正後のソースコード

import { Controller, FormProvider, useFormContext } from "react-hook-form";
import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";

参考

• Page refreshes after submitting form #1758