react-quill not working in Nextjs 15 and react 19

[hientt1803]

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:

"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:

// 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]

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 #973 for updates on that.

[balmacefa]

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

[jpainam]

I have a similar issue. react_dom_1.default.findDOMNode is not a function

[sganot-r7]

I have a similar issue. react_dom_1.default.findDOMNode is not a function

Same

[Wilmela]

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 #973 for updates on that.

Thanks a million.

[mehdi112357]

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

thank you so much, works for me too

[PremBhooma]

Thanks so much. react-quill-new works for me.

[LukasDeco]

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 #973 for updates on that.

Isn't the problem because of React 19 dropping this function, and not Chrome? From what I've read it shouldn't have anything to do with Chrome.

[VaguelySerious]

Chrome 127 dropped support for the DOMNodeInserted mutation event, see Chrome Dev blog post. quill has since stopped using DOMNodeInserted, but react-quill is using an outdated version of quill, which is why users still get warnings. react-quill-new just uses a newer version of quill.

[LukasDeco]

Hmmm, but the error is TypeError: react_dom_1.default.findDOMNode is not a function

[VaguelySerious]

@LukasDeco If it happens with react-quill-new, it could very well be an issue with how react-quill-new interacts with react 19 or next-js. In this case, feel free to create an issue on the issues page for react-quill-new and share a minimal reproducible example, and I'll fix it.