Out of date React dependency in CDN preventing ReactWebChat component render

[mSigson]

Version

4.6.0

Describe the bug

We're an Ember.js shop using Microsoft Bot Framework to implement a new bot in our web app. However, to render custom components through WebChat we've added React/ReactDOM to our build to be able to use the ReactWebChat component.

We want to make sure our version of React is as up to date as possible and due to the version locks in 4.6.0 our bot won't render due to duelling versions of React (see console error).

Current project versions:

"react": "^16.11.0",
"react-dom": "^16.11.0"

We've now had to change our CDN from
https://cdn.botframework.com/botframework-webchat/latest/webchat.js to https://cdn.botframework.com/botframework-webchat/4.5.3/webchat.js.

Enquiry

What are the reasons for locking React/ReactDOM in 4.6.0? 

I'd like to be able to upgrade our project version of React to stay up to date.

Is there a plan to upgrade React beyond 16.8.6 and to stay up to date as versions are released?

To Reproduce

Steps to reproduce the behavior:

1. open existing React Project (react/react-dom versions greater than 16.8.6)
2. At botframework through cdn https://cdn.botframework.com/botframework-webchat/latest/webchat.js
3. Attempt to render bot throughReactWebChat component

Expected bug behavior

Open console, expect to see errors from screenshot below.
Expect bot not to render/run

[corinagum]

Please see our sample and information on React and React Hooks https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/23.a.hybrid-react-npm

This includes helpful documentation and our justifications for locking React.

[gorner]

@corinagum Thanks for that response, we understand the need to lock to a single version >=16.8 but that page doesn't explain why the CDN build has been locked to 16.8.6 when the current version is 16.11.0.

Part of our team's broader point was that, because we were pointing to the "latest" CDN URL (as suggested in the documentation), our webchat feature broke quite suddenly and unexpectedly after the 4.6 release. We realize there's not really a good way to notify that new releases are forthcoming to a CDN in this circumstance but the breaking nature (for us) of 4.6 was frustrating.

We would have preferred if the documentation had just pointed to a specific version from the outset - or better yet a minor version stream like "4.5" so we would get patches - in combination with some other method of notifying devs of a new version (e.g. console.warn) so they could upgrade at their pace. (Of course we know we could use the NPM package as well, but there are a couple of specific reasons related to deferred loading we ended up using the CDN for now.)

[compulim]

We are not locking on a single version (16.8.6) specifically. We support React >= 16.8.6. I will verify to make sure Web Chat 4.6.0 can be loaded in React 16.11.0.

@mSigson, are you integrating Web Chat inside a React app? If yes, is there a reason not using NPM version of Web Chat but CDN?

If you are loading Web Chat inside a React app, NPM is recommended. But if you prefer to load it via CDN. You should expose your instance of React/ReactDOM via window.React and window.ReactDOM respectively. (@gorner, I think this will solve your problem.)

window.React = require('react');
window.ReactDOM = require('react-dom');

Technically, as explained in the error, it is caused by either:

1. There are multiple React and React DOM loaded in the web app. These React/DOM can be of same version, but they occupy different memory space.
   • You can follow this page to diagnose the problem, https://fb.me/react-invalid-hook-call#duplicate-react
2. The web page has some code using React Hooks outside of a functional component.

For CDN version, we use this load mechanism to prevent duplicated React (point 1):

1. If Web Chat detect there is a version of React loaded at window.React and window.ReactDOM, we will use that version.
2. Otherwise, Web Chat will use React 16.8.6 bundled inside Web Chat CDN JS file
   • We bundled React because devs using our CDN JS file, is usually on another platform, e.g. jQuery or Angular. They probably didn't load React in their web app.

This load strategy is optimized for web apps which prefer React from CDN as well (unpkg.com or UMD). Related sample, https://github.com/microsoft/BotFramework-WebChat/blob/master/samples/03.a.host-with-react/index.html

For NPM version, we do not bundle any version of React. So if you are using React 16.11.0, Web Chat use your version of React (a.k.a. peerDependencies). This is done thru npm install botframework-webchat.

[compulim]

I tested loading Web Chat 4.6.0 CDN JS file inside two environments of React:

• React 16.11.0 loaded via unpkg.com
• React 16.11.0 loaded via NPM via create-react-app

Both works.

[gorner]

Just to close the loop on this - our team (on which @mSigson was until very recently a member) investigated this week and discovered that this was due to another issue configuration issue that apparently was never noted until after this update.

In short (I won't go into much depth since this was mostly specific to our primarily Ember.js-based project) - React and ReactDOM were available globally, but we were including them in our code in a different way using shims that conflicted with something else and pulled in a separate ReactDOM build. And it was only after the WebChat build started using hooks that we discovered this.