lightning overlay issue

Question

I am trying to display table in the modalbody and modalfooter with ok and cancel button but over lay is not loading it throws some promise errors:

Uncaught (in promise) TypeError: Cannot read property 'la' of undefined
    at Object.dispatchGlobalEvent (aura_prod.js:707)
    at Promise (lightning-overlay-utils.js:2)
    at new Promise (<anonymous>)
    at Promise.all.then (lightning-overlay-utils.js:2)

overlaycomponent:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<lightning:overlayLibrary aura:id="overlayLib"/>    
</aura:component>

---

({
    doInit : function(component, event, helper) {
    var modalBody;
    var modalFooter;
    $A.createComponents([
        ["c:Datatablecomponent",{}],
        ["c:modalFooter",{}]
    ],
    function(components, status){
        if (status === "SUCCESS") {
            modalBody = components[0];
            modalFooter = components[1];
            component.find('overlayLib').showCustomModal({
               header: "Application Confirmation",
               body: modalBody, 
               footer: modalFooter,
               showCloseButton: true,
               closeCallback: function() {
                   alert('You closed the alert!');
               }
           })
        }
    }
   );   
    }
})

modalfooter:

<aura:component >
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="cancel" label="Cancel" onclick=""/>
    <lightning:button name="ok" label="OK" variant="brand" onclick=""/>
</aura:component>

datatable component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountController">
    <aura:attribute name="AccountData" type="Object"/>
    <aura:attribute name="SelectedAccount" type="Object[]"/>
    <aura:attribute name="columns" type="List"/>    
    <!-- Attribute Declration For Pagination -->
    <aura:attribute name="PaginationList" type="account"/>
    <aura:attribute name="startPage" type="Integer" />
    <aura:attribute name="endPage" type="Integer"/>
    <aura:attribute name="totalRecords" type="Integer"/>
    <aura:attribute name="pageSize" type="Integer" default="10"/>
    <!-- Attribute Declration For Pagination End-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <label>Account Table</label>
        <lightning:datatable aura:id="accountTable" data="{! v.PaginationList }" 
                             columns="{! v.columns }" 
                             keyField="id"
                             onrowselection="{! c.getSelectedName }"/>  
        <br/>
        <lightning:buttonGroup >
            <lightning:button label="Previous" disabled="{!v.startPage == 0}"  
                              onclick="{!c.previous}" variant="brand"
                              iconName='utility:back'/>
            &nbsp; &nbsp; &nbsp;
            <lightning:button label="Next" disabled="{!v.endPage >= v.totalRecords}" 
                              onclick="{!c.next}" variant="brand"
                              iconName='utility:forward' iconPosition='right'/>
        </lightning:buttonGroup>
        <lightning:button label="Save"  
                              onclick="{!c.save}" variant="brand"/>
</aura:component>

Answer 1

I can reproduce this issue for my popovers when I test my harness app or run mochaTests.app:

https://<my-environment>.lightning.force.com/c/<my-harness-app>.app

However, everything works inside my custom lightning page where I have added my Lightning component:

https://<my-environment>.lightning.force.com/one/one.app#/n/Awesome_and_Incredible_Taskpace_Tasks

Use the app builder to create a new lightning page. Then add your [root] component to this page.

I believe this is the correct way to test modals/popovers as well as navigation and urls in your components.