Bot FrameWork IE Issue using ReactJS and NodeJS web APP

Question

Hi I have bot framework implementation using Nodejs and reactjs in azure web app. The code works perfectly fine in Edge, Chrome but IN IE, i get blank page with the error attached. Below is the code. In Fact even when i try one of the example microsoft has on github it fails to load in IE. Here is the sample.

I did some reasearch and found out that reactjs does have some rendering issue with IE and that we should use polyfill package in our code, which i did still no luck.

import 'react-app-polyfill/ie11';
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
import { createStore } from 'botframework-webchat';
import { createStyleSet } from 'botframework-webchat';
import updateIn from 'simple-update-in';
import "babel-polyfill";
import "isomorphic-fetch";
//import 'react-app-polyfill/ie11';

export class BotFrameworkApp extends React.Component {
    constructor() {
        super();

        this.state = {
            directLine: null,
            styleSet: null,

        };
    }
        const response = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer token',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Access-Control-Request-Headers': 'x-requested-with'
            },

            body: JSON.stringify({
                accessLevel: 'View',
                allowSaveAs: 'false',
            })
        });
        const { token } = await response.json();
        //already set and now send

        this.setState(() => ({
            directLine: createDirectLine({ token }),
            userName: loginID,
            webchatStore: createStore({}, middleware),
            styleSet: createStyleSet({
                hideUploadButton: true,
                bubbleBackground: 'rgba(0, 0, 255, .1)',
                bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',

            })
        }));



    }
    render() {
        const {
            state: { data }
        } = this

        return (
            this.state.directLine && this.state.webchatStore ?
                <ReactWebChat
                    className="chat"
                    directLine={this.state.directLine}
                    styleSet={this.state.styleSet}

                />
                :
                <div>Connecting to bot&hellip;</div>
        );
    }
}
ReactDOM.render(<BotFrameworkApp />, document.getElementById('root'));

This is the error,

My tsconfig

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

My Webpack-config.js

module.exports = {
    devtool: 'source-map',
    entry: './app.tsx',
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

Answer 1

Per the README:

Customization as shown in non-ES5 samples are not supported for Internet Explorer. Because IE11 is a non-modern browser, it does not support ES6, and many samples that use arrow functions and modern promises would need to be manually converted to ES5. If you are in need of heavy customization for your app, we strongly recommend developing your app for a modern browser like Google Chrome or Edge.

Web Chat has no plan to support samples for IE11 (ES5).

For customers who wish to manually rewrite our other samples to work in IE11, we recommend looking into converting code from ES6+ to ES5 using polyfills and transpilers like babel.

That being said, the README sort of offers a workaround that I mostly got working. You'll have to play with CSS to finish it off.

Create your app

npx create-react-app my-app
cd my-app
npm i

Install additional modules

npm i -S babel-polyfill react-app-polyfill/ie11 botframework-webchat

Note: Make sure you're using the latest version of botframework-webchat. The team is adding IE11 compatibility fixes pretty frequently.

Add modules to project

Put this at the TOP of your index.js:

import 'babel-polyfill';
import 'react-app-polyfill/ie11';

Ensure support of IE (I'm guessing you're missing this part)

In package.json, make sure browserlist covers: "ie 11".

Note: in the default production list, it has ">0.2%", which covers IE11