6

I try to integrate a vis.js library (http://visjs.org) Timeline in a lightning component and i'm facing a problem when I activate the locker service (without, it works very well).

Timeline is correctly rendered but an error occured on hovering any element : "TypeError : cur.hasOwnProperty is not a function" on the method below

ItemSet.prototype.itemFromElement = function(element) {
    var cur = element;
    while (cur) {
        if (cur.hasOwnProperty('timeline-item')) {
            return cur['timeline-item'];
        }
        cur = cur.parentNode;
    }

    return null;
};

The method is called on hovering the timeline to find a specific element. The element returned is a simple Html element like

<div class="vis-foreground">...</div>

I think I have to rewrite some parts to be compatible but after a long time debugging on Chrome dev tools I'm really blocked...

A simple example picked from this page throws the exception : http://visjs.org/timeline_examples.html

  • I read that and vis.js is not in the whitelist... so the only way to include the timeline is rewriting (huge work ?) the library to be compliant with locker service or use the alternative proposed by salesforce, the "Lightning Container Component". It uses iframes and I would rather to use the new salesforce api for this new component. – Matthieu Jul 15 '17 at 17:02
6

When the Locker Service is turned on, any call such as this one made by vis.js:

var outer = document.createElement('div');

creates a Locker Service proxy object not a conventional DOM object and that proxy object imposes restrictions on the methods available. Normally there is a LockerService API Viewer available to see if a method is supported but that site is down at the moment.

I note that jQuery 2.2.4 that is documented as compatible with Locker Service does not make direct hasOwnProperty calls. Perhaps someone with experience of "fixing" 3rd party libraries to work with Locker Service can add an answer that explains more what is going on and what is needed to work-around the problem.

  • Yes I tried to debug inside the salesforce aura proxy but it's very obscure :) ! I will look the locker service API but I hope someone faced this sort or errors ! Thx – Matthieu Jul 15 '17 at 12:21
0

@Matthieu, we have a fix coming for the next release (at the very least).

Meanwhile, here is a popular technique you can use to guard against the missing function on the object:

ItemSet.prototype.itemFromElement = function(element) {
    var hasOwn = Object.prototype.hasOwnProperty.call;
    var cur = element;
    while (cur) {
        if (hasOwn(cur, 'timeline-item')) {
            return cur['timeline-item'];
        }
        cur = cur.parentNode;
    }

    return null;
};
  • It gives me the same error... – Matthieu Sep 4 '17 at 12:07
  • @Matthieu, I haven't looked at this for a while. Which specific example on vis.js are you trying to run? – JF Paradis Sep 6 '17 at 23:42
  • 1
    I just tried the basic usage (Timeline basic usage) encapsulated in a lightning component and it throws the error when you mouse over the timeline. Thanks for your help ! – Matthieu Sep 18 '17 at 9:58
  • Hi @JFParadis. Please have a look at documentation.auraframework.org/lockerApiTest/…, last tab ("secure element"), search for "hasOwnProperty". Long story short "something" modifies the code so Objects aren't normal JS Objects anymore, they have less functions. Is there a way to release vis.js without these checks? Or what viable alternative you'd have for us? I don't look forward to an orgy of search-replace across whole vis.js library... – eyescream Sep 27 '17 at 0:34
  • @eyescream, thanks for pointing-out the problem. We fixed it for the coming release. We should be able to apply the fix to production soon. – JF Paradis Oct 6 '17 at 4:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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