在Astro中用React渲染Tiptap富文本框遇报错求助

问题背景 #

在Astro框架中尝试通过React组件渲染Tiptap富文本编辑器，参考Next.js环境的实现方案，给<NewArticleForm />添加client:only="react"指令后，组件完全不显示，同时出现模块导出错误。

代码结构 #

index.astro #

---
import Layout from '../../layouts/Layout.astro'
import {NewArticleForm} from '@/components/react_pages/NewArticleForm'
---
<Layout title="New Article">
    <NewArticleForm client:only="react" />
</Layout>

NewArticleForm.tsx #

import {
    Form, FormControl, FormField, FormItem, FormLabel, FormMessage
} from '@/components/ui/form'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'
import * as z from 'zod'
import {Input} from '@/components/ui/input.tsx'
import Tiptap from "@/components/Tiptap.tsx";

export const NewArticleForm = () => {
    const formSchema = z.object({
        title: z.string().max(100, {message: 'Title is too long'}),
        content: z.string().min(100, {message: 'You can type more than that'}),
    })

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        mode: 'onChange',
        defaultValues: {
            title: '',
            content: '',
        },
    })

    const onSubmit = (values: z.infer<typeof formSchema>) => {
        // 提交逻辑待实现
    }

    return (
        <main>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                <FormField control={form.control} name='title' render={({field}) => (
                    <FormItem>
                        <FormLabel>Title</FormLabel>
                        <FormControl>
                            <Input placeholder='Article title' {...field} />
                        </FormControl>
                    </FormItem>
                )}  />
                <FormField control={form.control} name='content' render={({field}) => (
                    <FormItem>
                        <FormLabel>Content</FormLabel>
                        <FormControl>
                            <Tiptap description={field.value} onChange={field.onChange} />
                        </FormControl>
                    </FormItem>
                )}  />
                </form>
            </Form>
        </main>
    )
}

Tiptap.tsx #

import {useEditor, EditorContent} from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

export default function Tiptap({description, onChange}: {description: string, onChange: (richText: string) => void}){
    const editor = useEditor({
        extensions: [StarterKit.configure()],
        content: description,
        editorProps: {
            attributes: {
                class: 'rounded-md border min-h-[150px] border-input bg-back'
            },
        },
        onUpdate({editor}){
            onChange(editor.getHTML())
            console.log(editor.getHTML())
        }
    })

    return (
        <div className='flex flex-col justify-stretch min-h-[250px]'>
            <EditorContent editor={editor} />
        </div>
    )
}

错误信息 #

newarticle:1457 [astro-island] Error hydrating 
/src/components/react_pages/NewArticleForm.tsx SyntaxError: 
The requested module '/node_modules/.vite/deps/react-hook-
form.js?v=b9251174' does not provide an export named 
'ControllerProps' (at form.tsx:6:3)

解决方案 #

1. 修复react-hook-form版本兼容性问题 #

错误核心是ControllerProps导出不存在，大概率是你的UI组件（如shadcn/ui的Form组件）与当前安装的react-hook-form版本不匹配：

• 卸载当前版本：

  npm uninstall react-hook-form
  

• 安装shadcn/ui官方推荐的兼容版本（以v7.45.0为例，可根据最新文档调整）：

  npm install react-hook-form@^7.45.0
  

2. 修正UI组件导入与Props传递 #

• 检查@/components/ui/form.tsx文件，确认ControllerProps的导入路径正确。如果是shadcn生成的组件，确保导入语句为：

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

• 在NewArticleForm.tsx中，给Input组件添加{...field}属性，确保表单值能正确双向绑定：

  <Input placeholder='Article title' {...field} />
  

• 修正Tiptap组件的props传递：将description={field.name}改为description={field.value}，因为field.name是字段标识符，而非字段值，这样编辑器初始内容才能正确关联表单值。

3. 验证客户端指令 #

保持client:only="react"指令，也可尝试client:load（页面加载时立即渲染）或client:visible（组件进入视口时渲染），确保React组件能在客户端正确 hydration。

内容的提问来源于stack exchange，提问作者code writer 3000