Can't get plugins to work (MapBox, BottomNavigation)

plugins

#1

I’ve made the base sample app project, my first NS-project. Tried adding a couple of plugins but in both cases the app dies with System.err: Error: A Frame must be used to navigate to a Page.. Am I doing something wrong?

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Home"/>

    <Mapbox
        accessToken="pk.eyJ1Ijoic2VpZmlwIiwiYSI6ImNqZ2lqMzU4YTBpYTgyeGs2NnFjdGsxemEifQ.3HbpDWHlGMdR8ncKyzs0vg"
        mapStyle="traffic_day"
        latitude="50.467735"
        longitude="13.427718"
        hideCompass="true"
        zoomLevel="18"
        showUserLocation="false"
        disableZoom="false"
        disableRotation="false"
        disableScroll="false"
        disableTilt="false"
        (mapReady)="onMapReady($event)">
    </Mapbox>

    <StackLayout>
      <Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
      <Button class="btn btn-primary" @tap="$router.push('/hello')">Hello World</Button>
    </StackLayout>

    <!-- <BottomNavigation activeColor="red"
                      inactiveColor="yellow"
                      backgroundColor="black"
                      keyLineColor="black"
                      (tabSelected)="onBottomNavigationTabSelected($event)"
                      row="1">
        <BottomNavigationTab title="First" icon="ic_home"></BottomNavigationTab>
        <BottomNavigationTab title="Second" icon="ic_view_list"></BottomNavigationTab>
        <BottomNavigationTab title="Third" icon="ic_menu"></BottomNavigationTab>
    </BottomNavigation> -->

  </Page>
</template>

<script>
import Vue from 'nativescript-vue'

Vue.registerElement('Mapbox', () => require('nativescript-mapbox').MapboxView)
/* Vue.registerElement('BottomNavigation', () => require('nativescript-bottom-navigation').BottomNavigation)
Vue.registerElement('BottomNavigationTab', () => require('nativescript-bottom-navigation').BottomNavigationTab)
Vue.registerElement('OnTabSelectedEventData', () => require('nativescript-bottom-navigation').OnTabSelectedEventData) */

export default {
}
</script>

Full error trace:

# NativeScript Debugger started #
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

JS: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.application/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err: Error: A Frame must be used to navigate to a Page.
System.err: File: "file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js, line: 605, column: 16
System.err: StackTrace:
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 605, column: 23
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2184)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)
System.err:     at android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:136)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     at java.lang.reflect.Method.invokeNative(Native Method)
System.err:     at java.lang.reflect.Method.invoke(Method.java:515)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     at dalvik.system.NativeStart.main(Native Method)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err: Error: A Frame must be used to navigate to a Page.
System.err: File: "file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js, line: 605, column: 16
System.err: StackTrace:
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 605, column: 23
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     at android.app.Activity.performCreate(Activity.java:5231)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     ... 11 more
ActivityManager: Process org.nativescript.application (pid 3060) has died.

#2

I tried setting up a new project without vue router. Now the error is: System.err: TypeError: Could not load view for: mapbox. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-mapbox\mapbox.common", relative to: app/tns_modules/

# NativeScript Debugger started #
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

JS: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.application/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err: TypeError: Could not load view for: mapbox. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-mapbox\mapbox.common", 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.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     android.app.Activity.performCreate(Activity.java:5231)
System.err:     android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)System.err:     android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     android.os.Looper.loop(Looper.java:136)
System.err:     android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     java.lang.reflect.Method.invokeNative(Native Method)
System.err:     java.lang.reflect.Method.invoke(Method.java:515)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     dalvik.system.NativeStart.main(Native Method)
System.err: File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 78634
System.err: StackTrace:
System.err:     Frame: function:'jt', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 24595
System.err:     Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 91673
System.err:     Frame: function:'t.createElement', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 93095
System.err:     Frame: function:'an', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 27053
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94420
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 99576
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'_l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118474
System.err:     Frame: function:'Qo.$mount', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118771
System.err:     Frame: function:'init', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 105773
System.err:     Frame: function:'l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94714
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94149
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 100062
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'create', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118326
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 51, column: 22
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 101, column: 16
System.err:     Frame: function:'FrameBase.navigate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 213, column: 28
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 615, column: 19
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2184)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)
System.err:     at android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:136)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     at java.lang.reflect.Method.invokeNative(Native Method)
System.err:     at java.lang.reflect.Method.invoke(Method.java:515)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     at dalvik.system.NativeStart.main(Native Method)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err: TypeError: Could not load view for: mapbox. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-mapbox\mapbox.common", 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.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     android.app.Activity.performCreate(Activity.java:5231)
System.err:     android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)System.err:     android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     android.os.Looper.loop(Looper.java:136)
System.err:     android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     java.lang.reflect.Method.invokeNative(Native Method)
System.err:     java.lang.reflect.Method.invoke(Method.java:515)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     dalvik.system.NativeStart.main(Native Method)
System.err: File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 78634
System.err: StackTrace:
System.err:     Frame: function:'jt', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 24595
System.err:     Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 91673
System.err:     Frame: function:'t.createElement', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 93095
System.err:     Frame: function:'an', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 27053
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94420
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 99576
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'_l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118474
System.err:     Frame: function:'Qo.$mount', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118771
System.err:     Frame: function:'init', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 105773
System.err:     Frame: function:'l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94714
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94149
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 100062
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'create', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118326
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 51, column: 22
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 101, column: 16
System.err:     Frame: function:'FrameBase.navigate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 213, column: 28
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 615, column: 19
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     at android.app.Activity.performCreate(Activity.java:5231)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     ... 11 more
ActivityManager: Process org.nativescript.application (pid 3790) has died.


#3

can you share a repo or sample code of how you are implementing the modules?. About the initial problem was because u are not using the frame that allows you to navigate between pages you can find more information here https://gist.github.com/hshristov/f26f9a4db66d10aa99430c978e5411da

in this case would be something like

<GridLayout rows="*, auto">
  <Frame row="0">
    <Page>.....</Page>
  </Frame>
  <BottomNavigation row="1">
  ...
  </BottomNavigation>
</GridLayout>

PSD: I’m not sure of the code above, but you can follow the examples in the link I let you