Astro+React环境下react-hook-form无法正常使用问题求助

我使用Astro搭配React开发项目，通过Shadcn-ui构建组件。复制Shadcn提供的表单组件代码后，react-hook-form在运行时无法提供ControllerProps类型——尽管IDE中能正常识别该类型。具体错误信息：

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

相关代码：

import {
    Button,
    Input,
    Textarea,
    Form,
    FormLabel,
    FormControl,
    FormItem,
    FormMessage,
    FormField
} from '@/components/ui';
import React from 'react';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

const requiredError = {
    required_error: 'Dies ist ein Pflichtfeld'
};

const formSchema = z.object({
    email: z.string(requiredError).email({ message: 'Bitte geben Sie eine gültige Email an' }),
    name: z.string(requiredError),
    subject: z.string(requiredError),
    message: z.string(requiredError)
});

type Email = z.infer<typeof formSchema>;

export default function ContactForm() {
    const form = useForm<Email>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            name: '', email: '', subject: '', message: ''
        }
    });

    function onSubmit(values: Email) {
        console.log(values);
    }


    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-5'>
                {Object.keys(form.getValues()).map(name => (
                    <FormField
                        control={form.control}
                        name={name}
                        key={name}
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='capitalize'>{name}</FormLabel>
                                <FormControl>
                                    {name == 'message' ?
                                        <Textarea rows={5} {...field} /> :
                                        <Input {...field} />
                                    }
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                ))}

                <Button type='submit'>Senden</Button>
            </form>
        </Form>
    );
}

1. 确认react-hook-form版本
   react-hook-form v7及以上版本中，ControllerProps不再作为顶层导出，而是仅作为类型存在。检查package.json中react-hook-form的版本，确保是v7+，若版本过低则升级：

   npm install react-hook-form@latest
   

2. 修正类型导入方式
   若代码或Shadcn组件需要使用ControllerProps，必须通过类型导入引入，避免运行时导出错误：

   import type { ControllerProps } from 'react-hook-form';
   

   注：type关键字确保这只是类型导入，不会被打包到运行时代码中。

3. 同步Shadcn表单组件版本
   Shadcn的Form组件依赖特定版本的react-hook-form，可能存在版本不兼容问题。重新安装表单组件以适配当前依赖：

   npx shadcn-ui@latest add form
   

4. 清理依赖缓存
   缓存异常可能导致依赖解析错误，删除缓存文件后重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

5. 检查Astro的Vite配置
   Astro基于Vite构建，确保Vite未错误排除react-hook-form的优化。在astro.config.mjs中添加或确认以下配置：

   export default defineConfig({
     vite: {
       optimizeDeps: {
         include: ['react-hook-form']
       }
     }
   });
   

内容的提问来源于stack exchange，提问作者Felix Salcher