Error When Using RichText from AdminJS/Design-System

[lulu-cao]

Thanks for the tutorial on Medium! It's very helpful.

I wanted to ask about the usage of RichText in your public/pages/cv-response.jsx and public/pages/interview-response.jsx.

I was trying to use it in the same way as you did in these two files. Yet, I got an error that says

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of response.

Here is the code in my review.jsx file:

import { Button, ValueGroup, DatePicker, RichText } from "@adminjs/design-system";

const response = (props) => {
  const book = props.record.params;
  return (
    <div>
      <ValueGroup label="Completion Date">
        <DatePicker value={"2022-10-2"} propertyType="datetime"></DatePicker>
      </ValueGroup>
      <ValueGroup label="Review">
        <RichText
          quill={{
            theme: 'snow',
          }}
          value={book.title}
          onChange={() => {console.log("success")}}
        />
      </ValueGroup>
      <Button>Add</Button>
    </div>
  )
}

export default response;

I debugged for a few hours and narrowed down the problem to the usage of RichText. Here are three other versions of the RichText code I tried. But they don't work, either. ({body.title} does return a valid string value) Do you know where went wrong and how to solve this error?

        <RichText
          quill={{
            theme: 'snow',
          }}
          value={book.title}
        />

        <RichText
          quill={{
            theme: 'snow',
          }}
          value=""
        />

        <RichText
          value=""
        />

[lulu-cao]

Just found out that using RichTextEditor can avoid the error, though quill doesn't seem to work on RichTextEditor.

        <RichTextEditor 
          quill={{
            theme: 'snow',
          }}
          value={book.title} 
          onChange={()=>{console.log("Success")}}
        ></RichTextEditor>
        <RichTextEditor 
          quill={{
            theme: 'bubble',
          }}
          value={book.title} 
          onChange={()=>{console.log("Success")}}
        ></RichTextEditor>