nativescript-ui-sidedrawer - Issue loading in iOS: TypeError: Could not load view for: NativeRadSideDrawer

Question

Having an interesting issue with the nativescript-ui-sidedrawer plugin while building an app with nativescript-vue

When I preview my app using the tns preview command, everything works as expected. However, whenever I try to run the app in the iOS simulator with tns debug ios --bundle, I get the following message when trying to view a component that uses the plugin:

TypeError: Could not load view for: NativeRadSideDrawer. TypeError: The superclass is not an object. ../node_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js(file: node_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js:27:66)

Additionally, if I try to toggle the menu, I get an error about the $refs not being found (I can't get the exact message at the moment because the above error seems to be crashing my app).

I have added the plugin via tns plugin add nativescript-ui-sidedrawer and have the following included in my main.js

import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
Vue.use(RadSideDrawer)

I have tried with the template code used in the documentation as well as my own implementation, but I still get the same error.

If anyone has any idea then I would be grateful for any help. Likewise if I can provide any more information to help debug it please let me know

For the $refs problem, it would be helpful to share your code, mainly the template code because element placement is critical as the drawer needs to be at the root view. Please this explanation - stackoverflow.com/questions/61125406/… - on how to properly set a nativescript-angular drawer, maybe this can help you although you're using vue. — Ron Evans
For the problem when running on iOS simulator, did you try running using tns run ios --bundle --no-hmr? — Ron Evans

Sunhat Sunhat · Accepted Answer · 2020-08-13T20:20:32

It's possible that you're trying to load the RadSideDrawer outside of the root frame.

Below is an example of how to use the RadSideDrawer in conjunction with the NativeScript Vue Navigator Plugin.

You can find out more on the NativeScript website for the Navigator.

If you still run into problems, you can see on the Documentation:

NOTE: If your plugin doesn't work right away, you might need to clean the project by removing the Platforms folders:

rm -rf platforms

https://nativescript-vue.org/en/docs/getting-started/nativescript-plugins/

Current version I've used for [email protected] to make this work, but future versions may still work with this example

App.vue

<template>
    <Page>
        <RadSideDrawer ref="drawer" drawerLocation="Left" gesturesEnabled="true" :drawerTransition="transition">
            <StackLayout ~drawerContent backgroundColor="#ffffff">
                <slot name="drawerContent"/>
            </StackLayout>
            <StackLayout ~mainContent ref="drawerMainContent">
                <slot name="mainContent"/>
            </StackLayout>
        </RadSideDrawer>
    </Page>
</template>

Home.vue

<template>
    <Page>
        <!-- Your page content -->
    </Page>
</template>

main.ts

import Vue from 'nativescript-vue'
import Navigator from 'nativescript-vue-navigator'
import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
import Home from 'components/Home.vue'

const defaultRoute = loggedIn ? '/' : '/login'

Vue.use(RadSideDrawer)
Vue.use(Navigator, { routes: { '/': Home } })

new Vue({
    render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            h('Navigator', {
                slot: 'mainContent',
                attrs: {
                    defaultRoute,
                }
            })
          ]
        )
      }
  }).$start();

nativescript-ui-sidedrawer - Issue loading in iOS: TypeError: Could not load view for: NativeRadSideDrawer

2 Answers