Sapper on:click event Modifiers in IE11

Question

I have a running sapper app and works really well in the modern browsers and am trying to support IE11 if I can.

The problem I have is none of the event modifiers fire. My code looks like this:

<script>
    let active = false;   

    function clickHandle() {

        alert("Hello");

        if( !active ) {
            active = true
            window.document.body.classList.add('m-active')
        } else {
            active = false;
             window.document.body.classList.remove('m-active')
        }
    
    }
</script>

<div on:click|preventDefault={clickHandle}>
            <svg height="33" viewBox="0 0 30 33" width="30" xmlns="http://www.w3.org/2000/svg">
                <g fill="#2e2e46" fill-rule="evenodd">
                    <path d="m29.2499952 0-29.2499952 3.64484922v6.51349338l29.2499952-3.64464779z"/>
                    <path d="m29.2499952 11-29.2499952 3.6448492v6.5134934l29.2499952-3.6446478z"/>
                    <path d="m29.2499952 22-29.2499952 3.6448492v6.5134934l29.2499952-3.6446478z"/>
                </g>
            </svg>
        </div>

IE11 will just not fire any on:click event. I am using the default rollup.config - Not sure if it's one of those where I cant support IE11 as trying to test https://svelte.dev/tutorial/event-modifiers in IE11 does not work so probably guessing its not supported.

Answer 1

The default rollup config includes "legacy" support. It automatically detects older browsers and uses different javascript. However, this legacy support does not include support for IE11 out-of-the-box. The logic to handle it looks like this:

(function() {
    try {
        eval("async function x(){}");
        var main = "${main}"
    } catch (e) {
        main = "${legacy_main}"
    };
    var s = document.createElement("script");
    try {
        new Function("if(0)import('')")();
        s.src = main;
        s.type = "module";
        s.crossOrigin = "use-credentials";
    } catch (e) {
        s.src = "${req.baseUrl}/client/shimport@${build_info.shimport}.js";
        s.setAttribute("data-main", main);
    }
    document.head.appendChild(s);
}());

You will need some more polyfills. The first issue you are likely to find is that shmimport doesn't work without them. There's some discussion about that here: https://github.com/Rich-Harris/shimport/issues/4. You will also need to serve modules transpiled to ES5.