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
    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
    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? 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
    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
    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... Jan 26, 2017 at 19:21

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.