Botframework-webchat: webchat-es5.js throws an error when a carousel activity is rendered in IE11

[Tiagojaduarte]

Hello all,

The webchat-es5.js library when used on Internet Explorer 11 throws an error before a carousel activity gets rendered.

TypeError: Invalid attempt to spread non-iterable instance

The UI behavior is that the whole chat window disappears.

This behavior can be seen by going to the demo below (using IE11) and typing carousel

https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle

[ianblitz]

I discovered this issue as well this morning. Running the webchat-instrumented-es5.js I built off of the master branch this morning, this is the error I get:

SCRIPT5022: Exception thrown and not caught
localhost:44321 (46,33)

The above error occurred in one of your React components:
in Unknown
in Unknown
in Connect(Component)
in Unknown
in li
in ul
in Unknown
in div
in Unknown
in Unknown
in div
in Unknown
in Connect(Component)
in Unknown
in div
in Unknown
in Unknown
in Unknown
in Unknown
in Connect(Component)
in Unknown
in Unknown
in Unknown

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

uncaught at anonymous TypeError: Invalid attempt to spread non-iterable instance
at _nonIterableSpread (eval code:46:33)
at _toConsumableArray (eval code:44:36)
at getView (eval code:66:5)
at Anonymous function (eval code:210:9)
at getStateFromUpdate (eval code:16073:11)
at processUpdateQueue (eval code:16134:7)
at updateClassInstance (eval code:11612:5)
at updateClassComponent (eval code:14490:5)
at beginWork (eval code:15440:9)
at performUnitOfWork (eval code:19108:5)

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Unknown
in Unknown
in Connect(Component)
in Unknown
in li
in ul
in Unknown
in div
in Unknown
in Unknown
in div
in Unknown
in Connect(Component)
in Unknown
in div
in Unknown
in Unknown
in Unknown
in Unknown
in Connect(Component)
in Unknown
in Unknown
in Unknown

Forgive the lack of markdown. I'm having some trouble getting that to format correctly.

[corinagum]

Thanks for filing this issue! We'll look into it.

This repros on master CDN with IE11, possibly due to #1900 react-film bump yesterday?
@compulim

[hansmbakker]

I have this error in an older version of Edge, too, with both the polyfill and non-polyfill version of webchat: https://github.com/Microsoft/BotFramework-WebChat/issues/1913

[ianblitz]

Having multiple suggested actions also triggers this issue. Reproducible using the Suggested Actions demo here.

[compulim]

Found the culprit.

[...document.children] will throw in some browsers (Invalid attempt to spread non-iterable instance). But it will work with latest Chrome/Edge. Guessing it might be caused by core-js polyfilled version of spread operator fail with DOM node list.

Replacing it with [].slice.call(document.children) will work.

A fix is coming very soon.

[Tiagojaduarte]

@compulim Great!

For those who want a workaround while the fix doesn't arrive just import the following CDN version.

https://cdn.botframework.com/botframework-webchat/4.3.0/webchat-es5.js

[corinagum]

@Tiagojaduarte if you want to use the new code immediately, it's available on master bits. Otherwise 4.4 is scheduled for the end of the month!

[Tiagojaduarte]

Thank you @corinagum for your reactivity! Great job!

[BharathPalanivelu]

Thank you @corinagum and i too faced this issue and resolved now in IE11 thanks.