Here is my first Component called Modal:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:overlayLibrary aura:id="cmp1" />
<div class="slds-col slds-size_1-of-1">
<lightning:button label="Open Modal" title="Open Modal" onclick="{!c.openAnotherComponent}"/>
</div>
</aura:component>
Controller for Modal Component looks like this:
({
openAnotherComponent: function(component, event, helper) {
$A.createComponent("c:OpenModal", {},
function(content, status) {
if (status === "SUCCESS") {
component.find('cmp1').showCustomModal({
body: content,
showCloseButton: false,
showCloseButton: true,
})
}
});
}
})
My second component which I want to open in a modal pop-up is called OpenModal and here is the code:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:overlayLibrary aura:id="cmp1" />
<p class="headerDiv">
Welcome to Modal Box
</p>
</aura:component>
Controller for OpenModal:
({
myAction : function(component, event, helper) {
}
})
This code works if Modal component is placed inside a Lightning page. However, if I place it within an app as shown below it errors out.
My App code is as follows:
<aura:application extends="force:slds">
<c:Modal/>
</aura:application>
Here is the error I encounter only if called from an app but not from a lightning page:
This page has an error. You might just need to refresh it. [Cannot
read property 'ja' of undefined]
Best Answer
lightning:overlayLibrary
is not supposed to work in standalone Lighting App and thus you are getting that error.If you refer to the documentation, the Experience section highlights all areas where a component can be utilized. So unless that specifies standalone Lightning App (as is the case with this specific component), that component is not supposed to work there.
Below is a screenshot just for comparison from the documentation to show which component works in which Experience.
For lightning:overlayLibrary, which is not supported in app:
For lightning:accordion, which is supported in app: