Managed package gives lightning out syntax error after adding the handling of an application event

Question

I have:

2 Lightning components

1 Lightning application (with dependency out)

2 Visualforce pages that host the lightning components through the lightning out application

What it does:

1 lightning component shows list of items and can redirect to the other lightning component showing more data for a particular item

The visualforce pages are there to have the functionality in classic UI

The situation:

Everything works in my DEV org where I create the managed package.

In other orgs the lightning components still work in Lightning Experience but when viewed in the Visualforce pages they don't show up anymore because of a syntax error:

VM429:1 Uncaught SyntaxError: Unexpected token w in JSON at position 0xhr.onreadystatechange @ lightning.out.delegate.js?v=qnVOSqP_GYth6AWC2fT1jQ:83

xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var config = JSON.parse(xhr.responseText);

                        // save the delegate version to local storage
                        localStorage.lightningOutDelegateVersion = config.delegateVersion;

xhr.responsetext:

while(1);↵*/{"defaultHandler":"function() {$A.clientService.hardRefresh()}","event":{"descriptor":"markup://aura:noAccess","attributes":{"s":1,"v":{"values":{}}},"eventDef":{"s":2,"v":{"descriptor":"markup://aura:noAccess","type":"APPLICATION","xs":"G","superDef":{"s":3,"v":{"descriptor":"markup://aura:applicationEvent","type":"APPLICATION","xs":"G","attributes":{}}},"attributes":{"redirectURL":{"s":4,"v":{"name":"redirectURL","type":"aura://String","xs":"G"}}}}}},"exceptionEvent":true}/*ERROR*/

This clearly has to do with the lightning out functionality.

Everything was still working in other orgs before the last release.

I only added the handling of an application event in the visualforce pages so the handleNavUrl and the eventService part so that navigation events that in lightning experience are handled by the one.app are handled by the Visualforce container in classic UI.

    <script>
var handleNavToURL = function(event){
    var theURL = event.getParam("url");
    console.log('Got URL from component: ' + theURL);
    if (theURL.includes('/apex/')) {
        window.top.location.assign(theURL);
    } else {
        window.open(theURL, '_blank');
    }
};

$Lightning.use("MYNAMESPACE:MYLOAPP", function() {
    $Lightning.createComponent(
        "MYNAMESPACE:NewsFeed",
        {
            label : "NewsFeed",
            recordId : "{!account.id}",
            sObjectName : "Account",
            newsFeedCount : "4"
        },
        "NewsFeed",
        function(cmp) 
        {
            $A.eventService.addHandler({ "event": "force:navigateToURL", "handler" : handleNavToURL})
        }
    );

});
</script>

I want to mention again that I don't have any problem at all in my own developer org.

It only gives a problem when it's packaged and installed in another org.

Anyone an idea?

PS: I changed some names in the code

Answer 1

I believe the issue is access control kicking in on MYNAMESPACE:NewsFeed - there is nothing in the linkage from VF -> LO -> Lightning Out that would automatically understand that the calling VF page is in the same namespace as the component. To confirm this please change MYNAMESPACE:NewsFeed to have <aura:component access="GLOBAL"> and retest the scenario.

Answer 2

Unlike the previous suggested answer, access="GLOBAL" was not missing in the components but it was missing in the lightning app.

<aura:application extends="ltng:outAppUnstyled" access="GLOBAL">
    // My dependencies
</aura:application>

It took several weeks chatting with multiple tiers of Salesforce support to figure this out.