TypeError: $A.J.Vg(...) is undefined, while trying to use notificationsLibrary or overlayLibrary

Question

I have Lightning App ( < aura:application extends="force:slds" > ) with some components: comboboxes, buttons, controllers, helpers etc. (everything works).

I made everything according to ( https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_lightning_overlayLibrary.htm ) SF dev page.

and there is

<lightning:overlayLibrary aura:id="overlayLib"/>

in my component ( or < lightning:notificationsLibrary aura:id="notifLib" / > ), controller has code:

   var c = component.find('overlayLib');
    c.showCustomModal({
        header: "Modal header section",
        body: "Content of Modal window",
        showCloseButton: true,
    });

however, when i run this code, i can see error in a console:

TypeError: $A.J.Vg(...) is undefined

and nothing is displayed. showCustomModal returns a promise, so something is happening:

Promise { "pending" }
<state>: "pending"
__proto__: PromiseProto
catch: function catch()
constructor: function Promise()
finally: function finally()
l: function then()
then: function then()
Symbol(Symbol.toStringTag): undefined
__proto__: Object { … }

other Lightning related things work (components, controllers, etc.)

How to use Overlay/Notifications Libraries ? How to make them visible ?

Answer 1

As stated in the documentation:

This component is supported in Lightning Experience, Salesforce app, and Lightning communities only.

Lightning Apps are not LEX, Salesforce, or LEX Community, so this feature won't work there. It's always important to check the documentation to see if a feature is supported in Lightning Apps (if it is, there won't be a note that the component only works in LEX).