Vue-Nativescript Back-Navigation crashes iOS App - ios

Question

I'm struggling with the proper navigation and experience a crash, once I go back to the Main-Site. That happens on my iOS device and the virtual devices.
My structure is as follows:
Dependencies in my package.json:
"dependencies": {
"#nativescript/core": "7.1.3",
"#nativescript/theme": "3.0.1",
"#nstudio/nativescript-cardview": "2.0.1",
"axios": "^0.19.2",
"js-cookie": "^2.2.1",
"kinvey-nativescript-sdk": "6.0.0",
"moment": "^2.24.0",
"nativescript-background-http": "4.2.1",
"nativescript-camera": "4.5.0",
"nativescript-fonticon": "^2.0.0",
"nativescript-http-formdata": "^2.1.0",
"nativescript-image": "3.0.1",
"nativescript-imagepicker": "7.1.0",
"nativescript-intl": "3.0.0",
"nativescript-iqkeyboardmanager": "1.5.1",
"nativescript-theme-core": "2.0.24",
"nativescript-ui-autocomplete": "7.0.2",
"nativescript-ui-calendar": "6.1.0",
"nativescript-ui-chart": "7.1.1",
"nativescript-ui-dataform": "7.0.4",
"nativescript-ui-gauge": "6.0.0",
"nativescript-ui-listview": "8.0.1",
"nativescript-ui-sidedrawer": "8.0.0",
"nativescript-vue": "2.8.3",
"terser-webpack-plugin": "^2.3.5",
"vform": "^1.0.1",
"vue-i18n": "^8.17.0",
"vuex": "^3.1.3"
}
app.js
new Vue({
store,
render: h => h('frame', [h(routes.login)]),
created() {
},
}).$start();
After after the successful Login, I will be redirected to Main.vue.
Main.vue contains following (Bottom Navigation and included component for main menu -> Home):
<template>
<Page actionBarHidden="true">
<ActionBar title="App-Name"></ActionBar>
<StackLayout>
<StackLayout>
<BottomNavigation height="auto">
<TabStrip>
<TabStripItem>
<Label text="Home"></Label>
<Image src="res://home"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Einstellungen"></Label>
<Image src="res://settings"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Info"></Label>
<Image src="res://browse"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Home></Home>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Settings></Settings>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Info></Info>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</StackLayout>
</StackLayout>
</Page>
</template>
The Home Component which contains the main menu, looks like that:
<template> </template>
and contains card which has a #tap function to go to the next page.
methods: {
logout() {
this.$store.dispatch("clearUser");
},
goToPageXY() {
this.$navigateTo(PageXY, {
clearHistory: false,
});
},
},
The page that is called via tap (PageXY in that case) contains this structure:
<template>
<Page class="page">
</Page>
</template>
The further navigation in 'deeper' pages works as expected and I can use the "Go back" button as I need to.
Problem:
Once I want to navigate back to the Main.vue (From PageXY back via history-mode ON or $navigateTo / $navigateBack) the App crashes. This only happens on that page.
The error output is following:
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x10de4b62e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2 0x10de8c3a8 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3 0x10e887c90 ffi_closure_unix64_inner
4 0x10e8886b2 ffi_closure_unix64
5 0x7fff23f47ce3 -[UIViewController __viewDidAppear:]
6 0x7fff23f47fbc -[UIViewController _endAppearanceTransition:]
7 0x7fff23e6d6a3 -[UINavigationController navigationTransitionView:didEndTransition:fromView:toView:]
8 0x7fff23e62284 __49-[UINavigationController _startCustomTransition:]_block_invoke
9 0x7fff23f6c4b8 -[_UIViewControllerTransitionContext completeTransition:]
10 0x7fff23f83680 __53-[_UINavigationParallaxTransition animateTransition:]_block_invoke.155
11 0x7fff24bcb250 -[UIViewAnimationBlockDelegate _didEndBlockAnimation:finished:context:]
12 0x7fff24b9bb62 -[UIViewAnimationState sendDelegateAnimationDidStop:finished:]
13 0x7fff24b9c101 -[UIViewAnimationState animationDidStop:finished:]
14 0x7fff24b9c285 -[UIViewAnimationState animationDidStop:finished:]
15 0x7fff27a8a4f6 CA::Layer::run_animation_callbacks(void*)
16 0x7fff20106508 _dispatch_client_callout
17 0x7fff20112ff7 _dispatch_main_queue_callback_4CF
18 0x7fff2038bdab __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
19 0x7fff2038662e __CFRunLoopRun
20 0x7fff203856c6 CFRunLoopRunSpecific
21 0x7fff2b76adb3 GSEventRunModal
22 0x7fff24675187 -[UIApplication _run]
23 0x7fff2467a038 UIApplicationMain
24 0x10e8884f5 ffi_call_unix64
25 0x115a85090
JavaScript stack trace:
file: node_modules/nativescript-vue/dist/index.js:4880:17
at destroy(file: node_modules/nativescript-vue/dist/index.js:4046:8)
at invokeDestroyHook(file: node_modules/nativescript-vue/dist/index.js:5455:60)
at patch(file: node_modules/nativescript-vue/dist/index.js:5808:47)
at file: node_modules/nativescript-vue/dist/index.js:4886:17
at handler(file: node_modules/nativescript-vue/dist/index.js:12773:12)
at _handleEvent(file: app/packages/core/data/observable/index.ts:296:19)
at notify(file: app/packages/core/data/observable/index.ts:278:27)
at onNavigatedFrom(file: app/packages/core/ui/page/page-common.ts:139:14)
at raiseCurrentPageNavigatedEvents(file: app/packages/core/ui/frame/frame-common.ts:310:24)
at _updateBackstack(file: app/packages/core/ui/frame/frame-common.ts:268:39)
at setCurrent(file: app/packages/core/ui/frame/index.ios.ts:58:25)
at file:///app/vendor.js:39242:23
at UIApplicationMain([native code])
at run(file: app/packages/core/application/index.ios.ts:395:20)
at file: node_modules/nativescript-vue/dist/index.js:12548:23
at file:///app/bundle.js:6582:10
at ./app.js(file:///app/bundle.js:6586:34)
at __webpack_require__(file: app/webpack/bootstrap:750:0)
at checkDeferredModules(file: app/webpack/bootstrap:43:0)
at webpackJsonpCallback(file: app/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEv<…>
JavaScript error:
file: node_modules/nativescript-vue/dist/index.js:4880:17: JS ERROR TypeError: undefined is not an object (evaluating 'vm._data.__ob__')
***** Fatal JavaScript exception - application has been terminated. *****
My feeling tells me, that I did mistakes when it comes to using Pages / Frames.
I would really appreciate any kind of help, since I'm struggling with that for hours already.
Thank you very much!

Answer 1

If you are using frame
try this
this.$navigateTo(PageXY, {
frame: 'frame',
});
to go back try this:
this.$navigateBack({frame: "frame"});