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.

[7kylor]

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.

Thank You 🚀 !

[anksthakur]

@Wilmela Thanks man it working

[DeeLaw-01]

Heyo, I had a lot of issues implementing Quill.js in NEXT 15 + React 19 with plugins ! Essentially, I wanted to do this:

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// The quill-image-resize-module-react package does not have a ts type defined, so we have to ignore the ts error
// @ts-ignore
import ImageResize from 'quill-image-resize-module-react';

//Function definition

     <ReactQuill
        ref={quillRef}
        value={editorContent}
        onChange={handleEditorChange}
        theme='snow'
        modules={modules}
        className='h-screen max-w-full'
      />

But I guess as @VaguelySerious pointed out, 'react-quill' doesn't support react-19, ended up using react-quill-new and dynamically loading in the packages like this:

import dynamic from 'next/dynamic'
import 'react-quill-new/dist/quill.snow.css'
// The quill-image-resize-module-react package does not have a ts type defined, so we have to ignore the ts error
//@ts-ignore
const ImageResize = dynamic(() => import('quill-image-resize-module-react'), {
  ssr: false
})
const ReactQuill = dynamic(() => import('react-quill-new'), { ssr: false })

Then, for 'Quill', I used a useEffect hook to ensure it only renders on the client side:

  useEffect(() => {
    // Dynamically import Quill and register the module
    if (typeof window !== 'undefined') {
      import('react-quill-new').then(({ Quill }) => {
        Quill.register('modules/imageResize', ImageResize)
      })
    }
  }, [])
  
  //Function definition

     <ReactQuill
        // @ts-ignore
        ref={quillRef}
        value={editorContent}
        onChange={handleEditorChange}
        theme='snow'
        modules={modules}
        className='h-screen max-w-full'
      />
  

This seems to have worked for me, hope it helps someone in the future!

[poran120]

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 dear, It was so helpful for me and my team and it works perfectly.