Better polyfilling for IE11 in NPM

[compulim]

Feature request

Currently, the polyfilling story isn't great on NPM via create-react-app.

• It requires use to copy bunches of line from index-es5.js into the hosting project to load the polyfills

One approach is to follow what create-react-app does. To make CRA works in IE11, you will need to import 'react-app-polyfill/ie11'; and it will bring all polyfills required to make the CRA app works in IE11.

We could do something similar with:

import 'botframework-webchat/ie11';
import { ReactWebChat } from 'botframework-webchat';

Or

import 'botframework-webchat-polyfill/ie11';
import { ReactWebChat } from 'botframework-webchat';

Also, it seems Set does not need to be polyfilled.

Update from 2021-12-14

We should use @babel/plugin-transform-runtime and configure @babel/preset-env with useBuiltIns: "usage" to inline polyfills (a.k.a. ponyfills).

• Add breaking changes: fetch is no longer polyfilled when using <script> tag to load Web Chat

For NPM install, we should do some investigations, goals:

• Import botframework-webchat will work on IE11 or older browsers without significant work on bundler configuration
  • Chrome 85 introduced String.prototype.replaceAll
• Ponyfills should not be leaked

[mchelen-gov]

This would have a significant positive impact on the ability to use the bot framework through NPM package :+1:

[Siri311]

Facing same issue with IE11. import 'botframework-webchat-polyfill/ie11'; (or) import 'botframework-webchat/ie11';

Not able to find after installing react-app-polyfill .

I am using SPFx with React (.ts and .tsx).

and installed npm i fast-text-encoding .

Thanks in Advance.

[Siri311]

I'm using /webchat-es5.js/ CDN. Is there any solution for Bot not loading in IE but the same is getting loaded in Chrome and Edge. Getting Below console errors: Unable to get property 'createStore' of undefined or null reference Unable to get property 'renderWebChat' of undefined or null reference.

I have include the link and its working as expected in chrome and Edge. Even if i try to load using script in console also its loading but window.WebChat is undefined. but in chrome its loading and window.WebChat is available both in build and console.

Code

SPComponentLoader.loadScript("/jquery-3.3.1.min.js").then(function($:any) { SPComponentLoader.loadScript("https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js") setTimeout(function(){ SPComponentLoader.loadScript("/Widget-IE.js") },10000)
})