ReactWebChat error in SPFx and IE11 with Polyfills

Version

4.4.2 of botframework-webchat 1.10 (latest) of SPFx

Describe the bug

First off, thanks for a solution that is very easy to integrate with React and directline, component works great everywhere except IE11. I’ve reviewed the other posts in the issues list related to IE11 and SPFx, most notably #2030, where the list of polyfills is pointed out. I’ve installed core-js and imported the same polyfills listed here: packages/bundle/src/index-es5.ts into my component and it still does not function in IE11. Occasionally, I will get an “Out of stack space” exception, but mostly the chat window will load, but does not show any messages. The out of stack space exception has a lengthy discussion on the SP Dev Docs repo here and I’ve tinkered with commenting out certain polyfills, but have not been able to get this thing working. Below is my component that my web part is loading:

IE:

Chrome/edge:

In IE console:

Note: in screenshot, I have set commented out since that is one that causes the out of stack space exception. I’ve also tried including the polyfills in the webpart.ts file and even importing an external polyfills.ts file, but none will work properly. If I am not importing something correctly, missing something, or there is any other advice, i’d greatly appreciate it. I’m hoping someone who has successfully implemented the React component in SPFx and has it working in IE can provide some insight. If there are further details needed, please let me know.

Steps to reproduce

1. yo ‘@microsoft/sharepoint’ to create new SPFx project
2. Install botframework-webchat and directline.
3. gulp serve and view in IE11.

Expected behavior

Working web part in IE11.

Additional context

[Bug]

[MaximCoppieters]

Hello, I’ve also struggled with making BotFramework-Webchat work with SPFX for IE11. After trying out a lot of configurations, I’ve finally found one that works for me.

I’ll start out with the versions I’m using. This is what my package.json file looks like (minus irrelevant packages and information):

{
  "dependencies": {
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
    "@microsoft/sp-property-pane": "1.10.0",
    "@microsoft/sp-webpart-base": "1.10.0",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.15.2",
    "botframework-webchat": "^4.4.2",
    "core-js": "^3.6.5",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "url-search-params-polyfill": "^8.1.0",
    "whatwg-fetch": "^3.0.0"
  },
  "resolutions": {
    "@types/react": "16.8.8"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.9.0",
    "@microsoft/rush-stack-compiler-3.3": "0.5.11",
    "@microsoft/sp-build-web": "1.10.0",
    "@microsoft/sp-module-interfaces": "1.10.0",
    "@microsoft/sp-tslint-rules": "1.10.0",
    "@microsoft/sp-webpart-workbench": "1.10.0",
    "@types/core-js": "^2.5.0",
    "@types/node": "^14.0.1",
    "babel-loader": "^8.1.0",
    "gulp": "~3.9.1",
    "gulp-env": "^0.4.0"
  },
  "browserslist": [
    "> 0.25%",
    "ie 11"
  ],
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

Besides adopting these versions, I’d also add the target and browserlist fields if they are not yet present in your package.json.

The next step is to add the babel loader with the presets to your webpack config. This is done in gulpfile.js. The way the configuration is loaded is similar to a .babel.rc file. At the top of the file I added the following line:

build.addSuppression(/Warning/gi); // Still allow the build to pass when warnings are printed

The babel configuration looks as follows:

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    /* Babel polyfills to make the bot work on IE11 */
    generatedConfiguration.module.rules.push({
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  ie: "11",
                },
                corejs: { version: 3 },
                useBuiltIns: "entry",
              },
            ],
            [
              "@babel/preset-typescript",
              {
                targets: {
                  ie: "11",
                },
                corejs: { version: 3 },
                useBuiltIns: "entry",
              },
            ],
            [
              "@babel/preset-react",
              {
                targets: {
                  ie: "11",
                },
                corejs: { version: 3 },
                useBuiltIns: "entry",
              },
            ],
          ],
        },
      },
    });
});

The “entry” flag tells babel you will partially supply your own polyfills in the entrypoint of the application, which for me are fairly similar to the ones you have. In my experience, the symbol and promise polyfill imports crashed the webpart for me. Here are the corejs imports in my WebPart entry point:

import "core-js/features/math/sign";
import "core-js/features/object/values";
import "core-js/features/object/assign";
import "core-js/features/object/entries";
import "core-js/features/object/from-entries";
import "core-js/features/object/is";
import "core-js/features/number/is-finite";
import "core-js/features/string/ends-with";
import "core-js/features/string/starts-with";
import "core-js/features/array/find-index";
import "core-js/features/array/find";
import "core-js/features/array/includes";
import "core-js/features/array/iterator";
import "core-js/features/dom-collections";
import "url-search-params-polyfill";
import "whatwg-fetch";

Now comes the tricky part, it took me quite a while to do find out about this. The framework allows you to load external libraries (eg. from CDN) in the config/config.json file. I did this to load the botframework library. This will replace the version from npm_modules at runtime, but keep its typings. The property to set is called externals. My config.json file looks like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
        ...
    }
  },
  "externals": {
    "botframework-webchat": "https://cdn.botframework.com/botframework-webchat/4.4.2/webchat.js"
  },
  "localizedResources": {
    "WebchatO365WebPartStrings": "lib/webparts/webchatO365/loc/{locale}.js"
  }
}

That’s it, if there are no other libraries installed in your project that cause polyfill conflicts, this setup should work for you. Hope it helps!

[corinagum]

Needs priority confirmation