The Webchat doesnt work with Internet Explorer

Question

Im working with bots and now im trying to implement the Bot via Direct Line. The Bot works with Google Chrome and Mozilla Firefox but not with the Internet Explorer.

The only Error im getting is a Syntax-Error. You can see that in the screenshots under this text.

But why?

<pre>
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/4.1.0/webchat-es5.js"></script>

<script>
    const store = window.WebChat.createStore({}, ({ dispatch: dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'webchat/join',
                    value: { language: window.navigator.language }
                }
            });
        }
        return next(action);
    });

    (async function () {
        const token =  '<Direct-Line-Secret>';
        const region = 'westeurope';
        const subscriptionKey = '<subscription-key>';

        const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
            subscriptionKey,
            region          
        });

        const styleOptions = {
            botAvatarInitials: 'BC',
            userAvatarInitials: 'UC'
        };

        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token }),
            store,
            locale: 'de-DE',
            styleOptions,
            webSpeechPonyfillFactory
        },

        document.getElementById('webchat'));
        document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
</script>
    
<style>
    #webchat {
        margin: 0 auto;
        clear: both;
        padding: 0 0px;
        position: fixed;
        bottom: 0;
        top: 0px;
        padding-bottom: 0px;
        width: 100%;
        height: 100%;
    }
</style>
</pre>

Answer 1

I can see that your script code contains => Arrow functions.

An arrow functions not supported in the IE browser.

This is the reason that it is showing a syntax error.

You need to transpile your ES6 code to ES5 code to make it work in the IE browser.

You can try to use Babel.js to transpile the code.

It can help you to fix this issue.

Helpful Thread link:

Why doesn't this arrow function work in IE 11?