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

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://&#xf46d;" class="fas t-36"/>
      </TabStripItem>
      <TabStripItem class="navigation__item">
        <Label text="Inventory"/>
        <Image src="font://&#xf468;" class="fas t-36"/>
      </TabStripItem>
      <TabStripItem class="navigation__item">
        <Label text="Promotions"/>
        <Image src="font://&#xf295;" class="fas t-36"/>
      </TabStripItem>
      <!-- <TabStripItem class="navigation__item"> <Label text="Analytics"/> <Image src="font://&#xf201;" 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>