Could not find module... nativescript-telerik-ui-pro/listview

[Henrique]

I've been using nativescript-telerik-ui-pro and it's working ok on my first project.

BUT, on any other projects, I get an error. It seems like it can't find the framework. 

Here are the steps to reproduce: 

tns create bugDemo --tsc
cat package.json 
{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.bugDemo"
  },
  "dependencies": {
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "rc"
  },
  "devDependencies": {
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

tns plugin add  file:///Users/henriqueMac/Documents/Telerik/UiForNativeScript1.6.1.231/Packages/nativescript-ui-pro.tgz
    Successfully installed plugin nativescript-telerik-ui-pro.

cat package.json 
{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.bugDemo"
  },
  "dependencies": {
    "nativescript-telerik-ui-pro": "file:///Users/henriqueMac/Documents/Telerik/UiForNativeScript1.6.1.231/Packages/nativescript-ui-pro.tgz",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "rc"
  },
  "devDependencies": {
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

 

// ADD items array to main-view-model.ts

public items: Array<string>;

// add next line to constructor:
this.items = ['Item 1', 'Item 2', 'Item 3']; // just for demo

// Add a RadListView to the xml, so main-page.xml is now: 

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" xmlns:lv="nativescript-telerik-ui-pro/listview">

<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout>
<lv:RadListView row="0" items="{{ items }}" selectionBehavior="Press" itemSelected="onItemSelected" class="menuListView" id="myOrderlistView">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate class="my-order-item-template">
<GridLayout columns="auto" rows="auto" class="stylelayout">
<Label row="0" text="Here I am" textWrap="true" class="item-name" />
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
<Label text="Tap the button" class="h1 text-center"/>
<Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
<Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
</StackLayout>
</Page>

 

tns build ios
tns run ios

ERROR: (this is on the simulator)
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:195:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:9:9
> Module '/Users/henriqueMac/Library/Developer/CoreSimulator/Devices/F3C9E401-3616-4043-BA6F-F7CA64C63FDC/data/Containers/Bundle/Application/78BC69E6-E786-49FC-AA1A-3A75D30BBA69/bugDemo.app/app/nativescript-telerik-ui-pro/listview' not found for element 'nativescript-telerik-ui-pro/listview:RadListView'.
  > Could not find module '/Users/henriqueMac/Library/Developer/CoreSimulator/Devices/F3C9E401-3616-4043-BA6F-F7CA64C63FDC/data/Containers/Bundle/Application/78BC69E6-E786-49FC-AA1A-3A75D30BBA69/bugDemo.app/app/nativescript-telerik-ui-pro/listview'. Computed path '/Users/henriqueMac/Library/Developer/CoreSimulator/Devices/F3C9E401-3616-4043-BA6F-F7CA64C63FDC/data/Containers/Bundle/Application/78BC69E6-E786-49FC-AA1A-3A75D30BBA69/bugDemo.app/app/nativescript-telerik-ui-pro/listview'.Apr 25 11:47:08 Henriques-MacBook-Pro com.apple.CoreSimulator.SimDevice.F3C9E401-3616-4043-BA6F-F7CA64C63FDC.launchd_sim[80854] (UIKitApplication:org.nativescript.bugDemo[0x7325][20774]): Service exited due to Segmentation fault: 11

All UI for NativeScript pro works on the very first app I've added to, but not on any other ones. 

Any ideas on what am I doing wrong? 

Thank you!

[Nikolay Tsonev]

Hello,
Thank you for your interest in UI for NatioveScript.

I reviewed the case I was able to reproduce the same scenario on my side.
In my further research, I found that this behavior could be related to the fact that in in the project are used tns-core-modules@rc, which are still under development and ---pro version 1.6.1.

The both package are not compatible and could lead the mentioned in the ticket error.
Regarding that, I could suggest installing nativescript-telerik-ui-pro@rc, which will allow you to use the both modules on the project.
Steps:
1.

tns plugin remove nativescript-telerik-ui-pro

2. 

tns plugin add nativescript-telerik-ui-pro@rc

3. 

rm -rf platforms

4.

rm -rf node_modules

5.

tns run ios

For your convenience, I am attaching sample project, which you could test on your side.

Bear in mind that the both tns-core-modules@rc, nativescript-telerik-ui-pro@rc are still under development and you could face some issues while using it.

Another option is to use the latest official version of the of the NativeScript 2.5.4 and -core-modules 2.5.2.
To install the latest official NativeScirpt you could use the following command:

npm install nativescript -g

For further info, you could also review the article here.



Regards,
nikolay.tsonev
Telerik by Progress

[Henrique]

Thank you for the response! 

I spent the whole day yesterday fighting with this, but was able to make it work in the end. 

I've ended up doing this: npm install nativescript -g

and then, it seems that I have to do the tns prepare iOS first, before the build; I believe it has some hooks that will do some configuration?? Not sure, but It's working again. 

Anyway, I didn't know I could do this:
tns plugin add nativescript-telerik-ui-pro@rc
cool! 

Thank you again!!

 

[Bon Lemuel]

Thanks for this reference! Helped me a lot :)