After upgrade react and Syncfusion libs to the latest version it is throwing error: Cannot read properties of undefined (reading 'hasOwnProperty')

[Sang Le]

We are using RichTextEditor with react version 17.0.2 it is working fine, but when we update react version to the latest (18.1.0), the RTE stopped work and it is throwing an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')

at Observer.notExist (observer.js:175:1)

at Observer.on (observer.js:25:1)

at RichTextEditorComponent.Component.on (component.js:231:1)

at ToolbarRenderer.wireEvent (toolbar-renderer.js:28:1)

at new ToolbarRenderer (toolbar-renderer.js:25:1)

at new Toolbar (toolbar.js:26:1)

at createInstance (util.js:25:1)

at ModuleLoader.inject (module-loader.js:33:1)

at RichTextEditorComponent.Component.injectModules (component.js:332:1)

at RichTextEditorComponent.Component.dataBind (component.js:216:1)

I was able to reproduce it in StackBlitz I've shared the project here: https://stackblitz.com/edit/react-ts-cuihbh?file=App.tsx

Is there any required configuration to run it properly?

[Buvana Sathasivam]

Hi Sang,

Greetings from Syncfusion support.

We have validated your reported query and our components are compatible with React 18. But currently, the React Strict mode is not compatible with Syncfusion components. However, we are working on it and it will be included with our Volume 2 release which is scheduled on the end of June 2022. So, kindly we request you keep track of the status from the below feedback.

Feedback: https://www.syncfusion.com/feedback/34073/need-to-provide-compatible-support-for-strict-mode-in-react-18

Until then we suggest you to remove React Strict mode to resolve the reported issue. Please find the attached sample for your reference.

Index.tsx

root.render(

  <StrictMode>  // Remove the StrictMode

    <App />

  </StrictMode>

);

App.tsx

import '@syncfusion/ej2-icons/styles/material.css';

import '@syncfusion/ej2-buttons/styles/material.css';

import '@syncfusion/ej2-splitbuttons/styles/material.css';

import '@syncfusion/ej2-inputs/styles/material.css';

import '@syncfusion/ej2-lists/styles/material.css';

import '@syncfusion/ej2-navigations/styles/material.css';

import '@syncfusion/ej2-popups/styles/material.css';

import '@syncfusion/ej2-richtexteditor/styles/material.css';

Sample: https://stackblitz.com/edit/react-ts-bn4t8f?file=App.tsx

Regards,

Buvana S