This is a problem I'm facing with 2 modules I installed through npm (tns add plugin produces the same error).
Oct 24 13:27:00 mbp mobile[83478]: file:///app/tns_modules/ui/builder/builder.js:167:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:18:11
↳Building UI from XML. @file:///app/mainTabs/tabNews/tabNews.xml:6:20
↳Module 'ui/fab' not found for element 'Fab'.
↳Could not find module 'ui/fab'. Computed path '/Users/foo/Library/Developer/CoreSimulator/Devices/<device id>/data/Containers/Bundle/Application/<app id>/mobile.app/app/tns_modules/ui/fab'.
The path (including "tns_modules") is wrong. I don't even have a directory named tns_modules.
The modules are installed in the directory nodes_modules/, at its root.
I have some other plugins installed that work fine.
I have tried to:
- delete the platform/ directory
- delete the app from the emulator
- tns plugin add
- tns build ios
- tns run ios
This didn't solve the problem.
The plugins are:
https://github.com/bradmartin/nativescript-floatingactionbutton and https://github.com/bradmartin/nativescript-pulltorefresh
Any idea what I'm doing wrong?
EDIT:
This is how I call the plugin in my XML:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:x="nativescript-statusbar" actionBarHidden="false" loaded="loaded" xmlns:FAB="nativescript-floatingactionbutton">
Then in this page I have a tabView. Each tab is in a separate file (through distinct namespaces).
Here's the code of the tab where I'm trying to add the floating button:
<GridLayout rows="auto, *">
<ListView id="news-feed" items="{{ news }}" loaded="onLoaded" itemLoading="onItemLoading" separatorColor="#f4f4f4" class="newsfeedView">
<ListView.itemTemplate>
<GridLayout class="gridView">
</GridLayout>
</ListView.itemTemplate>
</ListView>
<FAB:fab tap="fabTap"
row="1"
icon="res://ic_add_white"
rippleColor="#f1f1f1"
class="fab-button" /></GridLayout>