Production mode Issues with react version>15.6.1

arrrash commented 6 years ago

Production build of the Bot for react version > 15.6.1 will throw error upon typing in the text area. Seems like some compatibility issues for most recent React versions.

Uncaught Error: Minified React error #44; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=44 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

compulim commented 6 years ago

@arrrash the error says "findDOMNode was called on an unmounted component."

Can you give us some details on the error? Are you unmounting Web Chat?

jiayexie commented 6 years ago

I am seeing the same error with just setting up a sample web chat; nothing out of the ordinary. The error shows up when I start typing in the chat text box. It doesn't repro with dev build, but only production build, so it's very hard to track down the actual issue.

It does not block simple chatting with the bot, but it's blocking me from interacting with an adaptive card. My form "submit" action will not trigger because of this error.

jiayexie commented 6 years ago

If it helps, this is the error I get when I start typing in the chat box:

reactProdInvariant.js:31 Uncaught Error: Minified React error #44; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=44 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at e.exports (reactProdInvariant.js:31)
    at Object.e.exports [as findDOMNode] (findDOMNode.js:53)
    at t.handleKeyDownCapture (Chat.js:96)
    at Object.<anonymous> (react-dom.production.min.js:15)
    at Object.invokeGuardedCallback (react-dom.production.min.js:16)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:16)
    at A (react-dom.production.min.js:20)
    at D (react-dom.production.min.js:22)
    at M (react-dom.production.min.js:22)
    at P (react-dom.production.min.js:21)

It looks like findDOMNode(this.historyRef) in Chat.tsx is causing the error. It occurs in handleKeyDownCapture() and handleCardAction(). Please help look into it as it blocks adaptive card actions.

rodrigorodriguez commented 6 years ago

@compulim we are using the v4 version of Bot Framework and the same error is happening when using createOAuthPrompt from botbuilder-prompts.

Uncaught Error: Minified React error #44; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=44 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at r (reactProdInvariant.js:31)
    at Object.r [as findDOMNode] (findDOMNode.js:53)
    at t.handleCardAction (Chat.js:82)
    at t.doCardAction (History.js:75)
    at Object.onCardAction (History.js:98)
    at t.onExecuteAction (AdaptiveCardContainer.js:86)
    at s (card-elements.js:3117)
    at t.e.execute (card-elements.js:1618)
    at e.actionClicked (card-elements.js:1950)
    at e.u.onClick (card-elements.js:2096)

We lost some time in a Microsoft Hackathon due to this error, would you please, prioritize it? We have a bot platform based on Bot Framework, if you need help on this let us know.

shmuelgutman commented 6 years ago

@compulim I see your commit: https://github.com/Microsoft/BotFramework-WebChat/pull/1157 We might do the same "catch" for this also https://github.com/Microsoft/BotFramework-WebChat/blob/05fd47637b877b9baef244ba3692d2c386754d3d/src/Chat.tsx#L162

compulim commented 6 years ago

Working on this right now, will get it fix asap. Dupe of #1198.

Prelim investigation suggest Web Chat is relying on React 15, and when it run on React 16, findDOMNode is returning null/undefined.

compulim commented 6 years ago

The problem is:

Web Chat depends on react@15.6.1 and react-dom@15.6.1
Host page using React of other versions (I tested @16.5.2)
I guess, there is a version mismatch between react and react-dom
- ReactDOM.findDOMNode() always throw and say the component is unmounted
- In fact, the component was not unmounted
  - I guess it is because the different version of react/react-dom used by Web Chat and the host page
  - When react-dom doesn't know how to handle the version difference, it think the component is simply unmounted

So in the fix, we are moving react and react-dom from dependencies to peerDependencies (@^15.6.1 || ^16). That means the host page need to supply react/react-dom in the version range. Since the host page already include both of them, it should not requires any changes.

compulim commented 6 years ago

Fixed in botframework-webchat@0.14.3-master.72bfef9.

rodrigorodriguez commented 6 years ago

@compulim, thanks for your support. After switching to 0.14.3-master.72bfef9:

Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at react-dom.production.min.js:25
    at a (react-dom.production.min.js:40)
    at Gr (react-dom.production.min.js:2489)
    at c (react-dom.production.min.js:3003)
    at p (react-dom.production.min.js:3049)
    at m (react-dom.production.min.js:3084)
    at react-dom.production.min.js:3217
    at to (react-dom.production.min.js:3336)
    at ho (react-dom.production.min.js:3612)
    at Wo (react-dom.production.min.js:4600)

Dependencies:


    "ajv": "6.5.4",
    "botframework-directlinejs": "0.10.0",
    "botframework-webchat": "0.14.3-master.72bfef9",
    "deep-extend": "0.6.0",
    "fetch": "1.1.0",
    "msal": "0.2.3",
    "powerbi-client": "2.6.5",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-helmet": "5.2.0",
    "react-player": "1.6.6",
    "react-powerbi": "0.3.1",
    "react-scripts": "2.1.1",
    "react-transition-group": "2.5.0",
    "url-join": "4.0.0"

compulim commented 6 years ago

I am not seeing it.

Steps I repro

Run create-react-app@2
Open package.json, replace dependencies with your snippet
Delete node_modules and package-lock.json
Run npm install again
Run npm run build
Host the /build folder

And I modified App.js, here is mine:

import React, { Component } from 'react';
import { Chat } from 'botframework-webchat';
import { Observable } from 'rxjs';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Chat directLine={{ secret: 'YOUR_SECRET_HERE' }} user={{ id: 'user_id', name: 'user_name' }} />
      </div>
    );
  }
}

export default App;

The error from minified React say:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Looks like it could be some problems on your React code, maybe doing a <SomeClass> and that SomeClass is undefined.

rodrigorodriguez commented 6 years ago

The <SomeClass> is in fact import { Chat } from "botframework-webchat" take a look at this video. The piece:

<Chat directLine={{ secret: 'YOUR_SECRET_HERE' }} user={{ id: 'user_id', name: 'user_name' }} />

Was hard coded to reproduce your sample code. It was switched on and off to see the error been thrown while it was being rendered to the page.

bug

rodrigorodriguez commented 6 years ago

I'm sorry, tested again: "botframework-webchat": "0.14.3-master.72bfef9" solved the problem. Thank you @compulim .

rodrigorodriguez commented 6 years ago

That picture with no bug was from the <Chat directLine={{ secret: 'YOUR_SECRET_HERE' }} user={{ id: 'user_id', name: 'user_name' }} /> code when is changed back to a which uses this notation:

                 <Chat
                     ref={chat => {
                         this.chat = chat;
                     }}
                     locale={'pt-br'}
                     line={this.state.line}
                     user={this.getUser()}
                     bot={{ id: "bot@gb", name: "Bot" }}   
                 />

It throws:

Chat.js:207 Uncaught TypeError: Cannot read property 'connectionStatus$' of undefined
    at e.componentDidMount (Chat.js:207)
    at Ia (react-dom.production.min.js:5304)
    at Pa (react-dom.production.min.js:5017)
    at Aa (react-dom.production.min.js:4983)
    at ka (react-dom.production.min.js:4927)
    at Ko (react-dom.production.min.js:4847)
    at Object.enqueueSetState (react-dom.production.min.js:2844)
    at t._.setState (react.production.min.js:72)
    at e._next (GBUIApp.js:204)
    at e.__tryOrUnsub (Subscriber.js:305)

compulim commented 6 years ago

Chat.js:207 Uncaught TypeError: Cannot read property 'connectionStatus$' of undefined

This one is because <Chat> doesn't have either botConnection or directLine props set.

rodrigorodriguez commented 6 years ago

Done. I'm sorry, my mistake. Reason: a global text replacement changed directLine (MSFT terminology) to just line (General Bots terminology) and that was it. When changed to botConnection and everything went fine. I will try some kind of type checking on React level to warn about unknown attributes.

Thank you again, @compulim. In a few weeks I will send a pitch video for you about how to build your General Bots environment, your help would be wonderful - And useful, we got a lot of issues to solve. We are automating the ARM stuff so developers will just hit F5 to get their bot running on Azure.

rodrigorodriguez commented 6 years ago

@compulim, here is the video: https://www.youtube.com/watch?v=AfKTwljoMOs.

rodrigorodriguez commented 5 years ago

@compulim, same error here - we have a demo in a few hours, if you would like to help it would be appreciated.

rodrigorodriguez commented 5 years ago

@compulim, nevermind. I can see now that you changed everything about WebChat, we will need a rewrite.

alokraj68 commented 4 years ago

Hi @compulim,

After 4.7.1 upgrade we are getting a similar error as follows:

https://reactjs.org/docs/error-decoder.html/?invariant=321

Could you please help?

microsoft / BotFramework-WebChat

Production mode Issues with react version>15.6.1 #970

Steps I repro