Trying to render Tiptap in React using Astro

Question

I'm trying to render a Tiptap rich text box with React inside of Astro. I was following a tutorial from a guy who was doing it on Next but I figured that I could do the same thing on Astro since it's still React. If you wanna watch the video, here it is: https://www.youtube.com/watch?v=ml4USMIm594

I have index.astro:

---
import Layout from '../../layouts/Layout.astro'

import {NewArticleForm} from '@/components/react_pages/NewArticleForm'
---
<Layout title="New Article">
    <NewArticleForm />
</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' />
                        </FormControl>
                    </FormItem>
                )}  />
                <FormField control={form.control} name='content' render={({field}) => (
                    <FormItem>
                        <FormLabel>Content</FormLabel>
                        <FormControl>
                            <Tiptap description={field.name} 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>
    )
}

What I tried doing was adding client:only="react" to inside of index.astro, but instead that just doesn't display the NewArticleForm component at all and I just get this error:

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)

Answer 1

It seems like the error is occurring due to an incorrect import of ControllerProps from react-hook-form. To resolve this issue, please update your form.tsx file with the following code:

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