Reputation: 354
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)
Upvotes: 0
Views: 383
Reputation: 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"
Upvotes: 0