How to open a modal from with a custom component?

nativescriptcore

#1

I have a simple app that uses NS core with javascript. In the app I have a component with a simple purpose, open a modal on button tap. The issue is that I cannot seem to locate the file that the modal should open. The official exception looks like this: System.err: Calling js method onTouch failed
System.err: Error: Failed to load page XML file for module: …/…/modal/modal-page
System.err: File: "file:///data/data/org.nativescript.customFilterSelect/files/app/tns_modules/tns-core-modules/ui/gestures/gestures.js, line: 229, column: 40

Here is my code:

<!--app/home/home-page.xml:-->
<Page class="page"
navigatingTo="onNavigatingTo"  
xmlns:customFilter="shared/components/customfilter"
xmlns="http://schemas.nativescript.org/tns.xsd">

   <!--Add your page content here-->
   <ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
   </ActionBar>


 <StackLayout id="container">
    <customFilter:customfilter-fragment  />
 </StackLayout>

  </Page>

 <!--app/shared/components/customfilter/customfilter-fragment.xml:-->
 <GridLayout columns="*,30" rows="auto,auto" loaded="onLoaded" tap="openModal">
 <Label row="0" col="0" text="Select" />
 <Label row="0" col="1" text="^" />  
</GridLayout>

<!--app/shared/components/customfilter/customfilter-fragment.js:-->

 //const modalPageModule = "customfilter/customfilter-modal";//failed
// const modalPageModule = "./customfilter/customfilter-modal";//failed
 //const modalPageModule = "~/customfilter/customfilter-modal";//failed
// const modalPageModule = "app/shared/components/customfilter/customfilter-modal"; //failed




exports.onLoaded = function(args){
 console.log("loaded!!!");
}

exports.openModal = function(args){
console.log("clicked!!!");
var page = args.object.page;
var fullscreen = false;
context = {}
page.showModal(modalPageModule, context, function closeCallback() {}, fullscreen);

}