Webpack: module nativescript-telerik-ui/sidedrawer not found for element nativescript-telerik-ui/sidedrawer:RadSideDrawer


#1

Am tearing my hair out!!!
Keep getting the following error:

Error: Building UI from XML. @file:///app/./pages/dotell/dotell.xml:18:3 > Module 
'/data/data/ng.com/files/app/nativescript-telerik-ui/sidedrawer' not found for element 
'nativescript-telerik-ui/sidedrawer:RadSideDrawer' > com.tns.NativeScriptException: 
Failed to find module: 
"/data/data/ng.com/files/app/nativescript-telerik-ui/sidedrawer", relative to: app//

What I have done

 1 Nuked my platform, node_modules and hooks folders
 2.tns plugin remove nativescript-telerik-ui
 3.tns platform remove android
 4.tns plugin add nativescript-telerik-ui
 5.tns platform add android

tns run android works well, but npm run start-android-bundle always gives the same error. My package.json file:

"dependencies": {
    "moment": "^2.17.0",
    "nativescript-apiclient": "^1.13.0",
    "nativescript-camera": "0.0.7",
    "nativescript-cardview": "^1.2.0",
    "nativescript-checkbox": "^1.2.2",
    "nativescript-color-picker": "^1.3.1",
    "nativescript-dev-android-snapshot": "^0.0.8",
    "nativescript-dialog": "0.0.8",
    "nativescript-drop-down": "^1.4.0",
    "nativescript-effects": "^0.3.0",
    "nativescript-fancyalert": "^1.1.0",
    "nativescript-geolocation": "0.0.14",
    "nativescript-google-maps-sdk": "^1.4.1",
    "nativescript-imagepicker": "^2.4.1",
    "nativescript-loading-indicator": "^2.2.1",
    "nativescript-platform-css": "^1.0.1",
    "nativescript-plugin-firebase": "^3.11.2",
    "nativescript-radiobutton": "^0.1.0",
    "nativescript-shimmer": "^1.0.1",
    "nativescript-social-share": "^1.3.1",
    "nativescript-sqlite": "^1.1.3",
    "nativescript-telerik-ui": "^1.6.2",
    "nativescript-theme-core": "^1.0.3",
    "nativescript-timedatepicker": "^1.1.0",
    "nativescript-toast": "^1.4.1",
    "tns-core-modules": "^2.5.2"
  },
  "devDependencies": {
    "awesome-typescript-loader": "~3.0.0-beta.9",
    "babel-traverse": "6.18.0",
    "babel-types": "6.18.0",
    "babylon": "6.13.1",
    "copy-webpack-plugin": "~3.0.1",
    "extract-text-webpack-plugin": "~2.0.0-beta.4",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "^0.3.7",
    "nativescript-dev-webpack": "^0.3.6",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~1.6.0",
    "typescript": "~2.1.0",
    "webpack": "^2.3.2",
    "webpack-sources": "~0.1.3"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }

I had done npm i nativescript-telerik-ui@next

dotell.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:sidedrawercontent="components/sidedrawercontent"
  loaded="pageLoaded">
  <Page.actionBar>
    <ActionBar title="{{ appTitle }}" class="action-bar" >
      <android>
        <ActionItem icon="res://ic_menu" tap="toggleDrawer" />
      </android>
      <ios>
        <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
      </ios>      
    </ActionBar>  
  </Page.actionBar>

  <drawer:RadSideDrawer id="side-drawer">
    <drawer:RadSideDrawer.mainContent>
      <GridLayout class="page-content">
        <TabView id="tabViewContainer" class="tab-view">
          <TabView.items>
            <TabViewItem title="Tell">
              <TabViewItem.view >
                <Label text="Tab 1" />>
              </TabViewItem.view>
              </TabViewItem>
              <TabViewItem title="Told">
                <TabViewItem.view>
                  <Label text="This is Label in Tab 2" />
                </TabViewItem.view>
            </TabViewItem>
          </TabView.items>
        </TabView>
      </GridLayout>
    </drawer:RadSideDrawer.mainContent>

    <drawer:RadSideDrawer.drawerContent>
      <sidedrawercontent:sidedrawercontent />
    </drawer:RadSideDrawer.drawerContent>
  </drawer:RadSideDrawer>
</Page>

Any help?


TS errors thrown following Webpack installation
#2

I have solved this problem :slight_smile:
Added:
global.registerModule("nativescript-telerik-ui/sidedrawer", ()=> require('../node_modules/nativescript-telerik-ui/sidedrawer'))

Trying to fix issue with code-behind not working!


#3

Hi all, though am a newbie in NS. I am facing similar problem I have tried all I could reinstalled android platform, upgraded all the node_modules including the dependencies and so on. Kindly help. thanks.


#4

it looks like all my app dependencies are triggering the same error nativescript-telerik-ui and nativescript-statusbar I’m so confused right now any assistance rendered I’d be glad


#5

@jazmine: Hi, re your fix:

global.registerModule(“nativescript-telerik-ui/sidedrawer”, ()=> require(’…/node_modules/nativescript-telerik-ui/sidedrawer’))

Which file within your project structure did you add that to please?