react-quill not working in Nextjs 15 and react 19

Author: hientt1803Created Jul 1, 2024Updated Aug 10, 2025

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
  • Version: "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", "next": "15.0.0-rc.0", "react-quill": "^2.0.0-beta.4",

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

  • This is my RichEditor component:
typescript
"use client"
// some import
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

export const RichEditorField = (props: IRichEditorFieldProps) => {
const quillRef = useRef<any>();
// 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}
         />
)
};