zenoamaro / react-quill

A Quill component for React.
https://zenoamaro.github.io/react-quill
MIT License
6.68k stars 909 forks source link

react-quill not working in Nextjs 15 and react 19 #989

Open hientt1803 opened 2 months ago

hientt1803 commented 2 months ago

This is error message: TypeError: react_dom_1.default.findDOMNode is not a function

  1. I think this error cause by the version of my application but i dont know if it exactly the bug or not.
  2. Please, does someone have a way to fix this issue

I tryna use react-quill in my project but got error TypeError: react_dom_1.default.findDOMNode is not a function

export const RichEditorField = (props: IRichEditorFieldProps) => { const quillRef = useRef(); // more code goes herre

return ( <ReactQuill // ref={quillRef} placeholder={placeholder} value={value} modules={modules} onChange={onChange} className="wrap-quill" readOnly={disabled} formats={formats} /> ); };


- This is where i use my component:
```typescript
// import
const QuillRichTextEditor = dynamic(
  () =>
    import(
      "@/components/form-control/rich-editor-field/components/editor"
    ).then((mod) => mod.RichEditorField),
  {
    ssr: false,
    loading: () => <p>Loading Text Editor...</p>,
  }
);

// i try another way to import but it still won't work
import {RichEditorField} from '.....';

// some import here

export const ModalDetail = () => {

return (
      <QuillRichTextEditor
           label="Content"
            formContext={formContext}
            name={`content_${currentLocale.key}`}
            disabled={isDisabeledField}
         />
)
};
VaguelySerious commented 1 month ago

This is because Chrome dropped support for a feature that an old quill version was using, and react-quill hasn't been updated yet. Try replacing react-quill with the forked react-quill-new in the interim until react-quill is updated. Also follow https://github.com/zenoamaro/react-quill/pull/973 for updates on that.

balmacefa commented 1 week ago

Thanks!!, this fork react-quill-new works for me!!