2

I am trying to load Joint.js and its dependencies libraries into my Lightning App (Locker Service is activated) and I got this error:

[Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.]

Joint.js error line number is 1400 and the code is:

   append: function(el) {
        var els = el;
        if (Object.prototype.toString.call(el) !== '[object Array]') {
            els = [el];
        }

        for (var i = 0, len = els.length; i < len; i++) {
            el = els[i];
            this.node.appendChild(el instanceof VElement ? el.node : el);  ERROR
        }
        return this;
    },

I use these version JointJS: JointJS v0.9.6 (joint.min.js and joint.min.css)

And JointJS dependencies: jQuery v2.0.3 lodash 3.10.1 backbone-min.js

Is anyone already experiencing this error or can help me solve this problem?

Thanks!

Here is my Lightning Code:

1) myTestApp.app

<aura:application >
    <c:myCompTest/>
</aura:application>

2) myCompTest.cmp

<aura:component >
    <ltng:require      styles="/resource/JointJS_Resources/joint.css,/resource/JointJS_Resources/qa.css"
        scripts='
            /resource/jquery.min.js,
            /resource/lodash.min.js,
            /resource/backbone-min.js,
            /resource/joint.min.js'
        afterScriptsLoaded="{!c.doAfterScriptsLoaded}"
    />
    <div id="mypaper"></div>
</aura:component>

3) myCompTestController.js

({
    doAfterScriptsLoaded :function(component, event, helper){
        console.log('doAfterScriptsLoaded called...');
        console.log('before...');
        helper.loadAppScripts(component,event);
        console.log('after...');
    }
})

4) myCompTestHelper.js

({
    loadAppScripts : function(component, event) {
        console.log('loadAppScripts...');

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: $('#mypaper'),
            width: 600,
            height: 200,
            model: graph,
            gridSize: 1
        });

        var rect = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            size: { width: 100, height: 30 },
            attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
        });

        var rect2 = rect.clone();
        rect2.translate(300);

        var link = new joint.dia.Link({
            source: { id: rect.id },
            target: { id: rect2.id }
        });

        graph.addCells([rect, rect2, link]);

    }

})

And an error occurs when I created var paper = new joint.dia.Paper (...)

Any idea?

1
  • These libraries are not made by considering LockerService. There are 100s of library broken with this.
    – Ashwani
    Commented Jan 12, 2017 at 19:56

1 Answer 1

2

Does JointJs meet the Lightning Securty requirements:

  • ES5 Strict Mode compliant
  • Content Security Policy compliant (does not use unsafe inline or any form of eval)

?

Currently instanceof is also listed as unsupported but we have managed to find a way to support it (not yet released). For example with Spring'17 we've seen only one library (Momentjs) so far that has a single problematic use of instanceof Function.

Can you please provide a link to the library/docs for Joint?

5
  • Thanks Doug! You can see about joint.js here: jointjs.com/opensource#Download-JointJS
    – Paulo Brum
    Commented Jan 12, 2017 at 21:46
  • @PauloBrum From looking at the code it looks like "el instanceof VElement ? el.node : el" is returning a non Node type value. Its probably returning a string. Can you give a git gist of your component markup or a repro snippet for the bug? Commented Jan 13, 2017 at 19:11
  • 1
    @Doug Chasman Looking fast at the jointjs code source : there is one place with "use strict", there aren't no eval function and there are lots of instanceof function. I was reading these blogs about ES5 Strict Mode and CSP. ejohn.org/blog/ecmascript-5-strict-mode-json-and-more and rachelappel.com/2015/02/02/javascript-strict-mode-explained. So I will study more about it.
    – Paulo Brum
    Commented Jan 13, 2017 at 21:32
  • Hi Doug, I just received the answer from Roman (JointJS CTO). "Hi Paulo, yes. JointJS meets both ES5 Strict Mode Compliance and CSP compliance (from v0.9.10 though). Best, Roman". Notice: I used an older version but also I have tried with the latest version and I still get the same error as well.
    – Paulo Brum
    Commented Jan 24, 2017 at 20:47
  • Any news from this? I could not figure out a workaround for this. It seems for me that any "graph" framework will likely be broken with Locker Service... Commented Jan 26, 2017 at 19:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .