unable to resolve dependency tree

[ChamsEldinne]

PS C:\Users\IT DOCTOR\Desktop\exame_paltform\front-end> npm install react-quill --save
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16 || ^17 || ^18" from [email protected]
npm error node_modules/react-quill
npm error react-quill@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\IT DOCTOR\AppData\Local\npm-cache_logs\2025-02-20T10_00_54_907Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\IT DOCTOR\AppData\Local\npm-cache_logs\2025-02-20T10_00_54_907Z-debug-0.log

How To fix This

[donghj2000]

Use quill directly in react.

2025 Note

You probably don't need this library to use Quill with React. See https://quilljs.com/playground/react

[Supwils]

You can try downgrade your react to react 18, then you will be able to use Quill. This should be the optimal solution.
Another way is to force download to your react19 npm install react-quill --legacy-peer-deps, but it will result in runtime error when you use it, I've tried.

I believe they didn't update this project for a react19 version since 18-19 had some major update on react, so you probably have to use react18 to use this tool.

[donghj2000]

If you insist on using this lib in react 19, you can replace findDOMNode by some other workaround:
before:
ReactQuill.prototype.getEditingArea = function () {
if (!this.editingArea) {
throw new Error('Instantiating on missing editing area');
}
var element = react_dom_1.default.findDOMNode(this.editingArea);
if (!element) {
throw new Error('Cannot find element for editing area');
}
if (element.nodeType === 3) {
throw new Error('Editing area cannot be a text node');
}
return element;
};

after:
ReactQuill.prototype.getEditingArea = function () {
if (!this.editingArea) {
throw new Error('Instantiating on missing editing area');
}
var element = this.editingArea instanceof Element
? this.editingArea
: (this.editingArea && 'current' in this.editingArea ? this.editingArea.current : null);

    if (!element) {
        throw new Error('Cannot find element for editing area');
    }
    if (element.nodeType === 3) {
        throw new Error('Editing area cannot be a text node');
    }
    return element;

};

And if you want to use quill in react directly ,please let me know ,I will give some code snippet.