Search code examples
reactjsbotframework

How to solve:"Unable to find node on an unmounted component." on entering text


I have integrated Botframework V3 in my React website, incorporate a custom build of the Web Chat component.I have include cdn for style

<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />

When ever i enter a value in my input tag,i get this error.

WebChat.js

import React from 'react';
import { Chat } from 'botframework-webchat';


export default class extends React.Component { 
  render() {
    return (
        <React.Fragment>
            <Chat 
            directLine={{ secret: ' SECRET_KEY' }} 
            user={{ id: 'user_id', name: 'user_name' }}/>
        </React.Fragment>
    );
  }
}

Error

Unable to find node on an unmounted component. invariant node_modules/react-dom/cjs/react-dom.development.js:57 findCurrentFiberUsingSlowPath node_modules/react-dom/cjs/react-dom.development.js:4438 findCurrentHostFiber node_modules/react-dom/cjs/react-dom.development.js:4450 findHostInstance node_modules/react-dom/cjs/react-dom.development.js:18562 findDOMNode node_modules/react-dom/cjs/react-dom.development.js:19068 Chat.handleKeyDownCapture /home/React/Botframework webchat/BotFramework-WebChat-3/built/Chat.js:160


Solution

  • Downgrading the react version to react: 16.5.2 solved the problem