Unable to use any plugins. "Module ... not found for element ..." - nativescript

Question

I'm new to NativeScript and just can't figure out how to load a plugin right.
As mentioned here, I added the plugin and from here, followed the steps for Core JS, but nothing seems to work.
I've tried with the RadListView and PullToRefresh so far but I keep hitting the same/similar roadblock. For the PullToRefresh plugin, the error I receive is as you see below.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: Error: Building UI from XML. #screens/home/home-page.xml:32:11
JS: > Building UI from XML. #screens/orders/orders-items-page.xml:9:5
JS: > Module '#nstudio/nativescript-pulltorefresh' not found for element '#nstudio/nativescript-pulltorefresh:PullToRefresh'.
JS: > _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
I'm running a NativeScript Core JS sample project with minor cosmetic modifications. I'm not entirely sure what code to post up here for reference, but here goes
home-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<BottomNavigation>
<TabStrip>
<TabStripItem class="navigation__item">
<Label text="Orders"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Inventory"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Promotions"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<!-- <TabStripItem class="navigation__item"> <Label text="Analytics"/> <Image src="font://" class="fas t-36"/> </TabStripItem> -->
</TabStrip>
<TabContentItem>
<Tabs>
<TabStrip id="top-nav">
<TabStripItem>
<Label text="Current Orders"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Past Orders"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame defaultPage="screens/orders/orders-items-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
</Tabs>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/promotions/promotions-page"/>
</TabContentItem>
<!-- <TabContentItem> <Frame defaultPage="screens/analytics/analytics-page"/> </TabContentItem> -->
</BottomNavigation>
</Page>
orders-item-page.xml
<Page navigatingTo="onNavigatingTo" loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:PullRefresh="#nstudio/nativescript-pulltorefresh">
<GridLayout rows="auto, *">
<FlexboxLayout flexDirection="row" justifyContent="space-around">
<Button class="" col="0" text="New Orders" tap="filter"></Button>
<Button class="" col="1" text="Preparing" tap="filter"></Button>
<Button class="" col="2" text="Ready for Pickup" tap="filter"></Button>
</FlexboxLayout>
<PullRefresh:PullToRefresh refresh="refreshList" indicatorFillColor="#fff000" indicatorColor="#3489db">
<ListView items="{{ orders }}" row="1">
<ListView.itemTemplate>
<GridLayout class="p-10 order-list-item" rows="auto, auto, auto, auto" columns="*, auto" androidElevation="5" margin="5" backgroundColor="white" borderRadius="10">
<FlexboxLayout flexDirection="row" row="0" colSpan="2" justifyContent="space-between">
<Label class="{{ 'status ' + status }}" text="{{ statusText }}" textTransform="uppercase"/>
<Label class="font-weight-bold" text="{{ 'Order to be Ready in ' + totalTime }}" fontSize="12"/>
</FlexboxLayout>
<FlexboxLayout class="m-t-10" flexDirection="row" row="1" colSpan="2" justifyContent="space-between">
<Label class="font-weight-bold" text="{{ '#' + number }}" fontSize="15"/>
<Label class="font-weight-bold" text="{{ '₹' + value }}" fontSize="15"/>
</FlexboxLayout>
<Label class="" text="{{ dateTime + ' | ' + itemsBrief }}" row="2" col="0" color="gray" fontSize="12"/>
<FlexboxLayout flexDirection="row" row="3" colSpan="2">
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
</FlexboxLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</PullRefresh:PullToRefresh>
<!-- <ActivityIndicator busy="{{ isLoading }}" row="1" horizontalAlignment="center" verticalAlignment="center"/> -->
</GridLayout>
</Page>