TypeError: react_dom_1.default.findDOMNode is not a function with React 19

[Emmy-Akintz]

When using react-quill with React 19, the component throws a TypeError: react_dom_1.default.findDOMNode is not a function upon mounting or rendering.

To Reproduce
Steps to reproduce the behavior:

1. Install React 19 and react-dom 19.
2. Install react-quill (e.g., version 2.0.0).
3. Import and render the <ReactQuill /> component in a React application.
4. The error occurs when the component attempts to mount.

Expected behavior
The <ReactQuill /> component should render without errors when used with React 19.

[bobangajicsm]

Same here

[Emmy-Akintz]

Same here

yeah, anyways for now I just downgraded to react 18 at least till it gets fixed...

[davidfcopozo]

When using react-quill with React 19, the component throws a TypeError: react_dom_1.default.findDOMNode is not a function upon mounting or rendering.

To Reproduce Steps to reproduce the behavior:

1. Install React 19 and react-dom 19.
2. Install react-quill (e.g., version 2.0.0).
3. Import and render the <ReactQuill /> component in a React application.
4. The error occurs when the component attempts to mount.

Expected behavior The <ReactQuill /> component should render without errors when used with React 19.

You can try the react-quill forked react-quill-new. It works fine for the most part, but I'm having issues with the Syntax module with react-quill It just works, but the react-quill-new seems to have problems with it

[Emmy-Akintz]

When using react-quill with React 19, the component throws a TypeError: react_dom_1.default.findDOMNode is not a function upon mounting or rendering.
To Reproduce Steps to reproduce the behavior:

1. Install React 19 and react-dom 19.
2. Install react-quill (e.g., version 2.0.0).
3. Import and render the <ReactQuill /> component in a React application.
4. The error occurs when the component attempts to mount.

Expected behavior The <ReactQuill /> component should render without errors when used with React 19.

You can try the react-quill forked react-quill-new. It works fine for the most part, but I'm having issues with the Syntax module with react-quill It just works, but the react-quill-new seems to have problems with it

do you mean the react-quill-new has problems with the syntax module also?

[davidfcopozo]

When using react-quill with React 19, the component throws a TypeError: react_dom_1.default.findDOMNode is not a function upon mounting or rendering.
To Reproduce Steps to reproduce the behavior:

1. Install React 19 and react-dom 19.
2. Install react-quill (e.g., version 2.0.0).
3. Import and render the <ReactQuill /> component in a React application.
4. The error occurs when the component attempts to mount.

Expected behavior The <ReactQuill /> component should render without errors when used with React 19.

You can try the react-quill forked react-quill-new. It works fine for the most part, but I'm having issues with the Syntax module with react-quill It just works, but the react-quill-new seems to have problems with it

do you mean the react-quill-new has problems with the syntax module also?

Yes, I tried the same syntax highlight structure with react-quill, and it works like charm, but with react-quill-new, I haven't been able to get it to work

[davidfcopozo]

When using react-quill with React 19, the component throws a TypeError: react_dom_1.default.findDOMNode is not a function upon mounting or rendering.
To Reproduce Steps to reproduce the behavior:

1. Install React 19 and react-dom 19.
2. Install react-quill (e.g., version 2.0.0).
3. Import and render the <ReactQuill /> component in a React application.
4. The error occurs when the component attempts to mount.

Expected behavior The <ReactQuill /> component should render without errors when used with React 19.

You can try the react-quill forked react-quill-new. It works fine for the most part, but I'm having issues with the Syntax module with react-quill It just works, but the react-quill-new seems to have problems with it

do you mean the react-quill-new has problems with the syntax module also?

After days trying to figure it out it was actually an error of mine, I was overriding the syntax module with the formats somehow, but it's working fine, here's a simple example Stackblitz - NextJs 15 + React-Quill-New + Highlight.js

[ktwbc]

AI totally wrote this but it works. Create the file ReactQuillWrapper and then in your component switch your import to

import ReactQuillWrapper from 'wherever/ReactQuillWrapper';

ReactQuillWrapper.ts contents:

import React, { forwardRef, useEffect, useRef } from 'react';

// Polyfill for findDOMNode to support React 19
if (typeof window !== 'undefined') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const ReactDOM = require('react-dom');
  if (!ReactDOM.findDOMNode) {
    ReactDOM.findDOMNode = (component: any) => {
      if (component && component.nodeType === 1) {
        return component;
      }
      if (component && component.current && component.current.nodeType === 1) {
        return component.current;
      }
      if (component && component._reactInternalFiber) {
        return component._reactInternalFiber.child.stateNode;
      }
      if (component && component.querySelector) {
        return component.querySelector('.quill');
      }
      return null;
    };
  }
}

// Import Quill types
type QuillOptions = {
  theme?: string;
  value?: string;
  onChange?: (value: string) => void;
  modules?: any;
  formats?: string[];
  placeholder?: string;
  readOnly?: boolean;
  className?: string;
  style?: React.CSSProperties;
};

// Create a wrapper component
const ReactQuillWrapper = forwardRef<any, QuillOptions>((props, ref) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [QuillComponent, setQuillComponent] = React.useState<any>(null);

  useEffect(() => {
    // Dynamically import react-quill only on client side
    if (typeof window !== 'undefined') {
      import('react-quill').then((module) => {
        setQuillComponent(() => module.default);
      });
    }
  }, []);

  if (!QuillComponent) {
    return (
      <div ref={containerRef} className="quill-loading">
        Loading editor...
      </div>
    );
  }

  return <QuillComponent {...props} ref={ref} />;
});

ReactQuillWrapper.displayName = 'ReactQuillWrapper';

export default ReactQuillWrapper;

[Lusquinhos]

same problem here

[subonedev]

AI totally wrote this but it works. Create the file ReactQuillWrapper and then in your component switch your import to

import ReactQuillWrapper from 'wherever/ReactQuillWrapper';

ReactQuillWrapper.ts contents:

import React, { forwardRef, useEffect, useRef } from 'react';

// Polyfill for findDOMNode to support React 19
if (typeof window !== 'undefined') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const ReactDOM = require('react-dom');
  if (!ReactDOM.findDOMNode) {
    ReactDOM.findDOMNode = (component: any) => {
      if (component && component.nodeType === 1) {
        return component;
      }
      if (component && component.current && component.current.nodeType === 1) {
        return component.current;
      }
      if (component && component._reactInternalFiber) {
        return component._reactInternalFiber.child.stateNode;
      }
      if (component && component.querySelector) {
        return component.querySelector('.quill');
      }
      return null;
    };
  }
}

// Import Quill types
type QuillOptions = {
  theme?: string;
  value?: string;
  onChange?: (value: string) => void;
  modules?: any;
  formats?: string[];
  placeholder?: string;
  readOnly?: boolean;
  className?: string;
  style?: React.CSSProperties;
};

// Create a wrapper component
const ReactQuillWrapper = forwardRef<any, QuillOptions>((props, ref) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [QuillComponent, setQuillComponent] = React.useState<any>(null);

  useEffect(() => {
    // Dynamically import react-quill only on client side
    if (typeof window !== 'undefined') {
      import('react-quill').then((module) => {
        setQuillComponent(() => module.default);
      });
    }
  }, []);

  if (!QuillComponent) {
    return (
      <div ref={containerRef} className="quill-loading">
        Loading editor...
      </div>
    );
  }

  return <QuillComponent {...props} ref={ref} />;
});

ReactQuillWrapper.displayName = 'ReactQuillWrapper';

export default ReactQuillWrapper;

thank you bro, it works.. but .tsx not .ts

[yoselin-2020]

react_dom_1.default.findDOMNode is not a function

[0x7s0lt1]

npm i react-quill-new

https://github.com/VaguelySerious/react-quill