Locker service error with vis.js

Question

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

Answer 1

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.

Answer 2

@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;
};