zenoamaro
unable to resolve dependency tree
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
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
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.
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.
