react-draft-wysiwyg: Some Tool bars are not working with the latest version of React

Some of the tools are not working with the latest version of React (from React 18.0.0).

I have reproduced this on codesandbox here.

The dropdowns, images, emoji tools are among those not working.

I noticed this weird error on the console anytime I click on any of these tools. proxyConsole.js:64 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.statedirectly or define astate = {}; class property with the desired state in the n component.

I have also tried using class components …same issue.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 1
  • Comments: 18

Most upvoted comments

I switched to a rich text editor

https://www.wangeditor.com/

------------------ 原始邮件 ------------------ 发件人: “jpuri/react-draft-wysiwyg” @.>; 发送时间: 2022年8月26日(星期五) 凌晨1:28 @.>; @.@.>; 主题: Re: [jpuri/react-draft-wysiwyg] Some Tool bars are not working with the latest version of React (Issue #1270)

@jpuri Can you solve this problem with react 18?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

@Lin-403 , the only workaround I found is using the old ReactDOM.render syntax instead of the new ReactDOMClient syntax.

That is, use this:

import ReactDOM from 'react-dom';

ReactDOM.render(
  <StrictMode>
      <App />
  </StrictMode>,
  document.getElementById('root'),
);

Instead of this:

import * as ReactDOMClient from "react-dom/client";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

I have the same problem. Have you solved it?