RequireJS not working with LockerService

Question

Problem is pretty straightforward, here is the test code I wrote for this case.

App

<aura:application >
    <aura:handler event="c:RequireJSEvent" action="{!c.initJS}"/>
    <aura:registerEvent type="c:RequireJSEvent" name="requireJSEvent"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
</aura:application>

Controller

({
    doInit : function(cmp, event, helper) {
        console.log("doinit");
        if (typeof require !== "undefined") {
            var evt = $A.get("e.c:RequireJSEvent");
            evt.fire();
        } else {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');

            script.src = "/resource/RequireJS"; 
            script.type = 'text/javascript';
            script.key = "/resource/RequireJS"; 
            script.helper = this;
            script.id = "script_" + cmp.getGlobalId();
            var hlp = helper;
            script.onload = function scriptLoaded(){
                var evt = $A.get("e.c:RequireJSEvent");
                evt.fire();
            };
            head.appendChild(script);
        }
    },
    initJS : function(component, event, helper){
        require.config({
            paths: {
                "jquery": "/resource/jquery?"
            }
        });
        console.log("RequiresJS has been loaded? "+(require !== "undefined"));
        //loading libraries sequentially
        require(["jquery"], function($) {
            console.log("jQuery has been loaded? "+($ !== "undefined"));
        });//require end
    }
})

Console output with LockerService on

Console output without LockerService on

I have a feeling the access check warning might have to do something with this, but I'm not sure..

Answer 1

The access check exception is because your onload callback is not wrapped inside $A.getCallback() so when it gets called the required Lightning context does not get re-established. Access control enforcemernt is not part of LockerService though and this code should fail with or without LS activated.

Try this simople change:

script.onload = $A.getCallback(function scriptLoaded(){
   var evt = $A.get("e.c:RequireJSEvent");
   evt.fire();
});

See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_mod_ext_js.htm for more details.

BTW why not just use ltng:require - the native Lightning component that supports dynamic loading, once and only once semantics, is the only Salesforce Security approved mechanism for including JS/CSS, etc? ltng:require also handles both CSS and Javascript resources and already has afterScriptsLoaded event model that is aware of the Lightning component rendering lifecycle, supports $Resource, automatically sets the base URL when running in a Community, and much more.