NativeScript encountered an error while trying to locate the module 'ui/sidedrawer' for the specified element 'Sidedrawer'

Currently, I am in the process of developing a simple side-drawer menu for my NativeScript application by following this helpful tutorial. I have successfully implemented it on a single page using the given code below.

starting_point.xml: 

<Page xmlns:sd="nativescript-telerik-ui/sidedrawer" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">

    <ActionBar title="Geminid Systems" class="action-bar">
        <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
    </ActionBar>

    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left">
        <sd:RadSideDrawer.drawerContent>
          <StackLayout class="sidedrawer-left">
             <StackLayout class="sidedrawer-header">
               <Label text="Geminid Systems" class="sidedrawer-header-brand" />
             </StackLayout>
             <StackLayout class="sidedrawer-content hamburgerMenu">
               <Label text="Home" class="sidedrawer-list-item-text" />
               <Label text="Accounts" class="sidedrawer-list-item-text" />
               <Label text="Calendar" class="sidedrawer-list-item-text" />
               <Label text="Activity" class="sidedrawer-list-item-text" />
               <Label text="Advanced" class="sidedrawer-list-item-text" />
               <Label text="Online " class="sidedrawer-list-item-text" />
            </StackLayout>
         </StackLayout>

         </sd:RadSideDrawer.drawerContent>

         <sd:RadSideDrawer.mainContent>
            <StackLayout>    
                <Button text="Toggle Drawer" class="btn" tap="toggleDrawer" />

            </StackLayout>
         </sd:RadSideDrawer.mainContent>
    </sd:RadSideDrawer>

</Page>

starting_point.js: 

var drawer;

exports.toggleDrawer = function () {
  drawer.showDrawer();
};
exports.onNavigatedTo = function (args) {
  var page = args.object;
  drawer = page.getViewById("sideDrawer");
};

The setup is working perfectly. However, I wanted to simplify and organize the code by moving the side-drawer functionality into a shared folder named shared to make it reusable across multiple pages without repetition. Here's how I attempted to do it:

Project Structure: 

.
├── app 
|   └── shared
|       └── sidedrawer.xml
|       └── sidedrawer.js
|   ├── app.css
|   ├── app.js
|   ├── starting_point.xml

starting_point.xml: 

<Page xmlns:sd="nativescript-telerik-ui/sidedrawer" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">

    <ActionBar title="Geminid Systems" class="action-bar">
        <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
    </ActionBar>

    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left">
        <sd:RadSideDrawer.drawerContent>

               <shared:sidedrawer /> <!-- CHANGE - Moved the content inside RadSideDrawer.drawerContent to shared/sidedrawer.xml for reusability and removed JS code from starting_point.js and put it in shared/sidedrawer.js -->

        </sd:RadSideDrawer.drawerContent>

        <sd:RadSideDrawer.mainContent>
            <StackLayout>    
                <Button text="Toggle Drawer" class="btn" tap="toggleDrawer" />

            </StackLayout>
        </sd:RadSideDrawer.mainContent>
    </sd:RadSideDrawer>
</Page>

shared/sidedrawer.xml 

<StackLayout class="sidedrawer-left">
  <StackLayout class="sidedrawer-header">
    <Label text="Geminid Systems" class="sidedrawer-header-brand" />
  </StackLayout>
  <StackLayout class="sidedrawer-content hamburgerMenu">
    <Label text="Home" class="sidedrawer-list-item-text" />
    <Label text="Accounts" class="sidedrawer-list-item-text" />
    <Label text="Calendar" class="sidedrawer-list-item-text" />
    <Label text="Activity" class="sidedrawer-list-item-text" />
    <Label text="Advanced" class="sidedrawer-list-item-text" />
    <Label text="Online " class="sidedrawer-list-item-text" />
  </StackLayout>
</StackLayout>

shared/sidedrawer.js: 

// no changes - same as the previous starting_point.js
var drawer;

exports.toggleDrawer = function () {
  drawer.showDrawer();
};
exports.onNavigatedTo = function (args) {
  var page = args.object;
  drawer = page.getViewById("sideDrawer");
};

I encountered the following error message : 

System.err: Error: Building UI from XML. @file:///app/views/home/home.xml:9:7
System.err: Module 'ui/sidedrawer' not found for element 'Sidedrawer'.
System.err: com.tns.NativeScriptException: Failed to find module: "ui/sidedrawer", relative to: app/tns_modules/
System.err: com.tns.Module.resolvePathHelper(Module.java:146)

As a beginner, any suggestions or guidance would be highly appreciated! Thank you.

javascriptandroidxmltypescriptnativescript

Answer №1

When exploring the Custom Components section in the documentation, you will notice a custom namespace incorporated into the Page element, which is crucial for your project.

In your starting_point.xml file, make sure to include 

xmlns:shared="path/to/shared.xml"
with the accurate path specific to your setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the page and witness the magical transformation as the div's background-image stylish

After browsing the internet, I came across a JavaScript script that claims to change the background-image of a div every time the page refreshes. Surprisingly, it's not functioning as expected. If anyone can provide assistance, I would greatly appreci ...

javascriptjqueryhtmlcss

Enhancing user experience with Jquery datepicker and executing multiple actions on select

I am working on a form that includes a jQuery date selector and radio buttons structured in a table as shown below: <table> <tr> <td> <input type="text" id="5506_datepick_1"></input> </td> <td&g ...

javascriptjqueryjquery-uijquery-ui-datepickerjsfiddle

Leveraging RXJS for real-time response to keyboard and mouse click combinations in web

I am new to RXJS and looking for a way to drag an HtmlElement when the user presses the space key and then drags the element with the mouse. The dragging should be initiated by either pressing the SPACE key followed by a left click, or vice versa. The dra ...

angulartypescriptrxjsmouseeventkeyboard-events

Tips for handling Firebase JS SDK errors within try-catch blocks

Attempting to type the err object in a function that saves documents to Firestore has been challenging. async function saveToFirestore(obj: SOME_OBJECT, collection: string, docId: string) { try { await firebase.firestore().collection(collection).doc( ...

typescriptfirebasegoogle-cloud-firestoretypescript-typings

Encountering errors while attempting to install TypeScript through NPM

I am encountering an issue while trying to install Typescript using npm. Following the documentation, I executed the command: npm install -g typescript or sudo npm install -g typescript - Everything seems to be going smoothly until it reaches about 2 ...

node.jstypescriptnpm

Show or hide a fixed position div using jQuery when clicked

I am new to jQuery and I am trying to create a "full page menu" on my own. However, I am struggling to hide the menu on the second click. I tried using .toggle() but I found out that it has been deprecated. Can someone assist me with this? Thank you so muc ...

javascriptjqueryhtmlcsshide

Updating previous values in reactjs to a new state

I have a div set up to render multiple times based on data retrieved from the database. The background color of the div corresponds to the ID received from the backend. My goal is to change the background color of the currently selected div and remove the ...

javascripthtmlcssreactjs

Having trouble with AngularJS not rendering on your HTML page?

This question has probably been asked countless times, but I'm genuinely unsure about what I'm doing wrong. The solutions I've come across so far haven't fixed the issue for me. Just to provide some context, I'm currently followin ...

javascripthtmlangularjs

Delete JSON row columns efficiently without the need for iteration

Looking for a way to filter out specific data from your JSON object without looping through the entire thing? Here is a sample of the JSON data: [ { "cost":"KES 0.8000", "messageId":"ATXid_0fae395279b54d51519de5581230a7e ...

javascriptnode.jsjsonexpress

In Angular 2, how does the "this" keyword from the subscribe method reference the class?

I am using a subscription for Observable, and when it finishes I need it to call a function from this class. The issue is that the "this" keyword refers to the subscription and not to the class scope. Here is the code snippet: export class GoogleMapCompo ...

angulartypescriptobservable

Having trouble reaching the unidentified function

There are two different scenarios where the 3rd party library (BrowserPrint.js) is used; FUNCTIONAL ENV - JS and jQuery with the 3rd party libraries included simply in the <head> section of the document and the main function being called in $(do ...

javascriptangularanonymous-function

Create a class for the grandparent element

Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...

javascriptjqueryhtmlcssdrop-down-menu

Continuous Scrolling with Callback Function in jQuery

I have implemented the infinite-scroll plugin, which replaces traditional pagination with ajax to fetch new pages. The issue I am facing is that jQuery functions do not recognize the new posts, causing certain functions like the ones below to stop working ...

javascriptjqueryajaxinfinite-scroll

Vue.js not responding to "mousedown.left" event listener

I am trying to assign different functionalities to right and left click on my custom element. Within the original code, I have set up event listeners for mouse clicks in the element file: container.addEventListener("mousedown", startDrag); conta ...

javascriptvue.jsevent-handlingvue-componentmouseevent

Struggling with a component that won't load in JSX?

Having some difficulty with React not rendering data associated with a component's props: import React from 'react'; import {ItemListing} from './ItemListing.js'; export var SearchResults = React.createClass({ render: functi ...

javascriptreactjs

Display the date in the user interface grid table

I've integrated ui-grid in my project to showcase data along with dates. An example of a date fetched from an ajax call would be: DateReview='06/25/2016' The current format being mm/dd/yyyy for display purposes. The column definition in ...

javascriptangularjsangular-ui-grid

What is the best way to enhance the object type within a function parameter using TypeScript?

If I have a specified type like this: type Template = { a: string; b: string; c: string } I want to utilize it within a function, but with an additional parameter. How can I achieve this efficiently? When attempting to extend the type, TypeSc ...

typescript

An unexpected issue occurred while attempting to create a new Angular app using the command ng

Currently in the process of deploying my angular application and utilizing Infragistics. Following their Documentation, I used npm install Infragistics for installation. However, when I run ng new --collection="@igniteui/angular-schematics" I e ...

angulartypescriptmodulecompiler-errorsinfragistics

What is the best way to exclude a specific key when adding JSON objects to an array?

I'm facing a challenge with a JSON array of objects that contains other arrays of objects. The structure of this array is not fixed, making it difficult for me to delete specific elements like delete mainArray[0].obj.subobj[1].objToOmit; In my progra ...

javascriptarraysangularjsjsonlodash

Creating an uncomplicated search bar that dynamically adjusts values based on its function

Summing it up, there is a div situated within my app.component.html: <div class="col-lg-6 search-div"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-b ...

javascriptangular