Failed to find module: "nativescript-ui-sidedrawer", relative to: app/tns_modules/


#1

I tried to use the https://play.nativescript.org/?template=play-vue&id=AWZeYG&v=5 example in the vue-cli-template

I installed the plugin
tns plugin add nativescript-ui-sidedrawer

in the main.js I have

Vue.registerElement(“RadSideDrawer”, () => require(“nativescript-ui-sidedrawer/vue”) ); // .RadSideDrawer
import Vue from ‘nativescript-vue’;
import Home from ‘./components/Home’;
import SettingsPage from ‘./components/SettingsPage’;
import store from ‘./store’;
import ‘./styles.scss’;

I got errors, then I changed
require(“nativescript-vue”).registerElement(“RadSideDrawer”, () => require(“nativescript-ui-sidedrawer”).RadSideDrawer);

to

//require(“nativescript-ui-sidedrawer/vue/side-drawer-vue-directives”) import RadSideDrawer from “nativescript-ui-sidedrawer/vue/side-drawer-vue-directives”;

I start the ‘Home’ component with render: h => h(Home)
could that be the problem?

System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: “nativescript-ui-sidedrawer”, relative to: app/tns_modules/
System.err: com.tns.Module.resolvePathHelper(Module.java:146)
System.err: com.tns.Module.resolvePath(Module.java:55)
System.err: com.tns.Runtime.runModule(Native Method)
System.err: com.tns.Runtime.runModule(Runtime.java:542)
System.err: com.tns.Runtime.run(Runtime.java:534)
System.err: com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err: android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1122)
System.err: android.app.ActivityThread.handleBindApplication(ActivityThread.java:6517)
System.err: android.app.ActivityThread.-wrap2(Unknown Source:0)
System.err: android.app.ActivityThread$H.handleMessage(ActivityThread.java:1963)
System.err: android.os.Handler.dispatchMessage(Handler.java:108)
System.err: android.os.Looper.loop(Looper.java:166)
System.err: android.app.ActivityThread.main(ActivityThread.java:7425)
System.err: java.lang.reflect.Method.invoke(Native Method)
System.err: com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:245)
System.err: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:921)
System.err: File: ", line: 1, column: 265


#2

I am admittedly not a Vue person, but there is this article on using plugins with NativeScript-Vue.


#3

you have to register sidedrawer component in main.js or app.js like this

Vue.registerElement('RadSideDrawer', () => require('nativescript-ui-sidedrawer').RadSideDrawer);

and use in .vue file like this

<template>
  <Page>
    <ActionBar title="DailyCricket" class="action-bar">
        <ActionItem @tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
    </ActionBar>
    <RadSideDrawer ref="drawer" showOverNavigation="true">
        <StackLayout ~drawerContent class="sideStackLayout">
            <StackLayout class="sideTitleStackLayout">
                <Label text="Navigation Menu"></Label>
            </StackLayout>
            <StackLayout class="sideStackLayout">
                <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
                <Label text="Social" class="sideLabel"></Label>
                <Label text="Promotions" class="sideLabel"></Label>
                <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
                <Label text="Important" class="sideLabel"></Label>
                <Label text="Starred" class="sideLabel"></Label>
                <Label text="Sent Mail" class="sideLabel"></Label>
                <Label text="Drafts" class="sideLabel"></Label>
            </StackLayout>
            <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" @tap="onCloseDrawerTap"></Label>
        </StackLayout>
        <StackLayout ~mainContent>
            <Label textWrap="true" class="drawerContentText"></Label>
            <Button text="OPEN DRAWER" @tap="openDrawer()" class="drawerContentButton"></Button>
        </StackLayout>
    </RadSideDrawer>
  </Page>
</template>

<script>
  export default {
    methods: {
        openDrawer() {
            this.$refs.drawer.nativeView.showDrawer();
        },
        onCloseDrawerTap() {
            this.$refs.drawer.nativeView.closeDrawer();
        },
        toggleDrawer() {
          this.$refs.drawer.nativeView.toggleDrawerState();
        }
    },
  }
</script>

#4

It might also help to run npm run clean as detailed here : https://www.nativescript.org/blog/using-plugins-in-a-nativescript-vue-app