How to open a modal from with a custom component?



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:

<Page class="page"

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

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


 <GridLayout columns="*,30" rows="auto,auto" loaded="onLoaded" tap="openModal">
 <Label row="0" col="0" text="Select" />
 <Label row="0" col="1" text="^" />  


 //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){

exports.openModal = function(args){
var page =;
var fullscreen = false;
context = {}
page.showModal(modalPageModule, context, function closeCallback() {}, fullscreen);