React 18 严格模式下 ReactQuill 富文本插件报错如何解决？

Question

使用react18 的严格模式，并且使用ReactQuill富文本的插件，不知道是不是严格模式导致的控制台的警告，也不知道是不是使用插件导致的问题 报错代码：
报错二：

插件的使用情况：

关闭严格模式还是报这个问题，可能是插件的问题导致的，还没找到解决办法

Answer 1

警告是关于 findDOMNode 已被弃用。这个警告来自于 ReactQuill 组件内部使用了已弃用的 API。

弃用警告：为 ‘DOMNodeInserted’ 变异事件添加了监听器
支持已移除：对此事件类型的支持已被移除
不再触发：此事件将不再被触发

解决方案一

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import { Provider } from "react-redux";
import store from "./store";
import "normalize.css";

// 抑制 ReactQuill 相关的弃用警告
const originalWarn = console.warn;
const originalError = console.error;

console.warn = function(...args) {
  const message = args[0];
  if (typeof message === 'string') {
    // 过滤掉 findDOMNode 警告
    if (message.includes('findDOMNode is deprecated')) {
      return;
    }
    // 过滤掉 react-dom 开发模式警告
    if (message.includes('react-dom.development.js')) {
      return;
    }
  }
  originalWarn.apply(console, args);
};

console.error = function(...args) {
  const message = args[0];
  if (typeof message === 'string') {
    // 过滤掉 DOMNodeInserted 警告
    if (message.includes('DOMNodeInserted')) {
      return;
    }
    // 过滤掉 Quill 相关的弃用警告
    if (message.includes('quill.js')) {
      return;
    }
  }
  originalError.apply(console, args);
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

解决方案二

卸载旧的 react-quill

npm uninstall react-quill

安装现代的 Quill 2.0

npm install quill@2.0.2 react-quilljs