0

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);
    }
};
  • Is this SharePoint online? If so, I have seen errors like this in the console even without the use of TypeScript. I have never found a rhyme or reason. It always involves accessing an attribute or property of a DOM element. – A.k.A. Fritz Jan 16 at 14:55
  • It's SP on Prem. That TypeScript is transpiled. To avoid confusion I added the literal code that's being ran. – Frank Jan 16 at 14:59
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?

  • Thank you for your suggestions. The script that is called is just plain ES5 JS. To avoid confusion added the relevant code in my question. I'm going to look into the strict mode enforcement, but it will surprise me if it doesn't meet the requirement. As for the race conditions, the animation var exists when creating animation.dataset.activated (please see the code which I've added in my question above). – Frank Jan 16 at 15:07
0

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.