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

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

I think this error cause by the version of my application but i dont know if it exactly the bug or not.
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}
         />
)
};

Jul 01 '24 08:07 hientt1803

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.

Jul 21 '24 08:07 VaguelySerious

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

Aug 30 '24 01:08 balmacefa

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

Oct 28 '24 02:10 jpainam

Same

Oct 29 '24 15:10 sganot-r7

Thanks a million.

Oct 30 '24 16:10 Wilmela

Nov 05 '24 06:11 mehdi112357

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

Nov 08 '24 07:11 PremBhooma

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.

Nov 14 '24 19:11 LukasDeco

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.

Nov 14 '24 19:11 VaguelySerious

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

Nov 14 '24 20:11 LukasDeco

@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.

Nov 14 '24 21:11 VaguelySerious

Thank You 🚀 !

Nov 17 '24 06:11 7kylor

@Wilmela Thanks man it working

Nov 26 '24 04:11 anksthakur

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!

Dec 09 '24 12:12 DeeLaw-01

Thanks dear, It was so helpful for me and my team and it works perfectly.

Dec 12 '24 13:12 poran120

Bro, I really want to say that this fork version react-quill-new is working fine, thanks so much, any idea that when the official one will be released on react 19?

Dec 18 '24 10:12 Kimoalking

@Kimoalking It's unlikely the "official" version will be updated since the maintainers are MIA and I can't get in contact. If that doesn't change, I imagine react-quill-new will be the "official" version going forward, which I'm also happy to give to a more active maintainer if there are any volunteers

Dec 18 '24 10:12 VaguelySerious

thank you very much!

Dec 25 '24 06:12 smlie123

Thanks for the solution

Jan 11 '25 07:01 gerismumo

Thank a lot I sped 2 days on this now I fix my project. Thanks again. ### react-quill-new

Jan 26 '25 04:01 eshakkhan29

Thanks a lot ❤️

Feb 10 '25 10:02 0xrasla

Thank you so much, it worked perfectly.

Feb 18 '25 07:02 hansalkothari

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!

Thank you. It worked for me too.

Feb 20 '25 15:02 mauriceconsult

Thanks 🙏

Mar 10 '25 23:03 halitguvenilir

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

Thank You @VaguelySerious!! This worked for me👍🏻🙌🏻

Mar 12 '25 04:03 chitrangimestry

react-quill-new works for me

Mar 16 '25 21:03 aburaihan8715

met the same issue while using react ^18 and next 15.2.1

react-quill-new worked for me

Mar 17 '25 14:03 developerasun

react-quill-new worked for me

Apr 06 '25 10:04 en-mostafa

thanks a bunch

in my next project i import it like this and now working , all thanks to you

export const Editor = ({ onChange, value }: EditorProps) => { const ReactQuill = useMemo( () => dynamic(() => import("react-quill-new"), { ssr: false }), [] );

return ( <div className="bg-white"> <ReactQuill value={value} onChange={onChange} theme="snow" /> ); };

Apr 29 '25 12:04 Devanshu232004Rastogi

Thanks!!, react-quill-new works for me too

Aug 10 '25 20:08 wilson-229dev