JS script only throws error when used in SharePoint in Internet Explorer 11

Question

I'm experiencing this strange issue.

I have a basic valid javascript app (Vue.js + Vuetify framework) which works fine in any browser (without SharePoint, so run from any hosted environment). Next I embed this script in SharePoint using the content editor webpart which points to the entry file. This also works fine in Chrome and Firefox.

In Internet Explorer 11, however, I get the following errors in my console which eventually breaks my app. I won't post it here directly as this library isn't responsible for the issue (it works fine without the SharePoint environment). The code in itself isn't the issue either because it works fine when not being ran from a sharepoint environment.

SCRIPT5007: Unable to set property 'activated' of undefined or null reference
SCRIPT5043: Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
SCRIPT5007: Unable to get property 'isHiding' of undefined or null reference

I'm at loss. Does SharePoint enforce different rules? The strange thing is though, those objects which are mentioned in the console exist: I checked it in the debugging console in IE/FF/Chrome (both when embedded on my sharepoint page as run somewhere else).

I know this is somewhat of a long shot, but if any of you ever had the same type of issue and could point me in the right direction, then that would be a great help.

I'm on SharePoint on prem 2013. Yes, I'm using polyfills.

Relevant code from Vuetify (which is minified in build) that creates the error in sharepoint

var ripple = {
    /* eslint-disable max-statements */
    show: function show(e, el) {
        var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

        if (!el._ripple || !el._ripple.enabled) {
            return;
        }
        var container = document.createElement('span');
        var animation = document.createElement('span');
        container.appendChild(animation);
        container.className = 'v-ripple__container';
        if (value.class) {
            container.className += ' ' + value.class;
        }

        var _calculate = calculate(e, el, value),
            radius = _calculate.radius,
            scale = _calculate.scale,
            x = _calculate.x,
            y = _calculate.y,
            centerX = _calculate.centerX,
            centerY = _calculate.centerY;

        var size = radius * 2 + 'px';
        animation.className = 'v-ripple__animation';
        animation.style.width = size;
        animation.style.height = size;
        el.appendChild(container);
        var computed = window.getComputedStyle(el);
        if (computed.position === 'static') {
            el.style.position = 'relative';
            el.dataset.previousPosition = 'static';
        }
        animation.classList.add('v-ripple__animation--enter');
        animation.classList.add('v-ripple__animation--visible');
        transform(animation, 'translate(' + x + ', ' + y + ') scale3d(' + scale + ',' + scale + ',' + scale + ')');
        opacity(animation, 0);
        animation.dataset.activated = String(performance.now());
        setTimeout(function () {
            animation.classList.remove('v-ripple__animation--enter');
            animation.classList.add('v-ripple__animation--in');
            transform(animation, 'translate(' + centerX + ', ' + centerY + ') scale3d(1,1,1)');
            opacity(animation, 0.25);
            setTimeout(function () {
                animation.classList.remove('v-ripple__animation--in');
                animation.classList.add('v-ripple__animation--out');
                opacity(animation, 0);
            }, 300);
        }, 0);
    },
    hide: function hide(el) {
        if (!el || !el._ripple || !el._ripple.enabled) return;
        var ripples = el.getElementsByClassName('v-ripple__animation');
        if (ripples.length === 0) return;
        var animation = ripples[ripples.length - 1];
        if (animation.dataset.isHiding) return;else animation.dataset.isHiding = 'true';
        var diff = performance.now() - Number(animation.dataset.activated);
        var delay = Math.max(200 - diff, 0);
        setTimeout(function () {
            animation.classList.remove('v-ripple__animation--out');
            setTimeout(function () {
                var ripples = el.getElementsByClassName('v-ripple__animation');
                if (ripples.length === 1 && el.dataset.previousPosition) {
                    el.style.position = el.dataset.previousPosition;
                    delete el.dataset.previousPosition;
                }
                animation.parentNode && el.removeChild(animation.parentNode);
            }, 300);
        }, delay);
    }
};

Answer 1

Can't write a comment, so here goes the "answer":

SharePoint enforces strict mode as far as I know. Perhaps check if your resulting script does meet this requirement?

You say you use polyfills, but maybe you used the wrong target when transpiling typescript? IE doesn't support ES6.

Other things I could imagine would be a race condition, that causes a problem in a SharePoint environment. Maybe check if your missing objects, that are shown in your browsers console, already exist when their properties get accessed?

Answer 2

Found out the issue. It might be specific to my environment, but it might help some people out (it drove me crazy).

Apparantly there was a x-ua-compatible meta tag which was set to IE10. My babel supported IE11 and up. So I changed x-ua-compatible to IE11 and everything was fine.