Nativescript-vue: Navigation Breaking on Fresh Install

[keithgulbro]

Version

2.5.1

Reproduction link

https://play.nativescript.org/?template=play-vue&id=SrXcgV&v=17

Platform and OS info

iOS 13.3.1

Steps to reproduce

Please view the Nativescript Playground link provided.

Steps to reproduce:
1.) Launch preview application provided via Nativescript Playground
2.) Tap "Navigate to TestComponent1"
3.) Tap "Navigate to TestComponent2"
4.) Tap "Show TestModal" (Modal should launch)
5.) Tap "Close"
6.) Navigate back to "TestComponent1" via the back arrow inside the action bar
7.) Attempt to tap "Navigate to TestComponent2" (notice the function "handleNavigation" is being called because the console log is coming through)

The issue is when a user navigates to a page then launches a modal, then closes said modal and goes back to a previous page then tries to navigate to a new page, nothing happens.

Additionally, the this.$navigateBack() function used for manual navigation breaks after launching & closing a modal with the following error:

JavaScript error:
file: node_modules/nativescript-vue/dist/index.js:14247:12 JS ERROR TypeError: undefined is not an object (evaluating 'frame.back')
NativeScript caught signal 11.
Native Stack:
1   0x100d6484f sig_handler(int)
2   0x7fff5245bb1d _sigtramp
3   0x7ffeef54f418
4   0x7fff5248fb85 libunwind::UnwindCursor<libunwind::LocalAddressSpace, libunwind::Registers_x86_64>::step()
5   0x7fff52493e58 _Unwind_RaiseException
6   0x7fff502568bd __cxa_throw
7   0x7fff513fbc44 _objc_exception_destructor(void*)
8   0x100d1fd58 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
9   0x100d57b60 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
10  0x1016f8dd6 ffi_closure_unix64_inner
11  0x1016f97fa ffi_closure_unix64
12  0x7fff47c4333d _UIGestureRecognizerSendTargetActions
13  0x7fff47c409ea _UIGestureRecognizerSendActions
14  0x7fff47c3fd17 -[UIGestureRecognizer _updateGestureForActiveEvents]
15  0x7fff47c31eda _UIGestureEnvironmentUpdate
16  0x7fff47c3140a -[UIGestureEnvironment _deliverEvent:toGestureRecognizers:usingBlock:]
17  0x7fff47c3117f -[UIGestureEnvironment _updateForEvent:window:]
18  0x7fff480d04b0 -[UIWindow sendEvent:]
19  0x7fff480ab53b -[UIApplication sendEvent:]
20  0x7fff4812c71a __dispatchPreprocessedEventFromEventQueue
21  0x7fff4812f1e0 __handleEventQueueInternal
22  0x7fff23bd4471 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
23  0x7fff23bd439c __CFRunLoopDoSource0
24  0x7fff23bd3b74 __CFRunLoopDoSources0
25  0x7fff23bce87f __CFRunLoopRun
26  0x7fff23bce066 CFRunLoopRunSpecific
27  0x7fff384c0bb0 GSEventRunModal
28  0x7fff48092d4d UIApplicationMain
29  0x1016f963d ffi_call_unix64
30  0x1072a0c60
JS Stack:
1   UIApplicationMain@[native code]
2   run@file: node_modules/@nativescript/core/application/application.ios.js:312:26
3   $start@file: node_modules/nativescript-vue/dist/index.js:14069:2
4   $start@file: node_modules/nativescript-vue-devtools/index.js:92:25
5   @file:///app/bundle.js:1194:10
6   ./main.js@file:///app/bundle.js:1198:34
7   __webpack_require__@file: app/webpack/bootstrap:750:0
8   checkDeferredModules@file: app/webpack/bootstrap:43:0
9   webpackJsonpCallback@file: app/webpack/bootstrap:30:0
10  anonymous@file:///app/bundle.js:2:61
11  evaluate@[native code]
12  moduleEvaluation@:1:11
13  promiseReactionJob@:1:11

What is expected?

The application navigation should work as expected. Nothing should crash.

What is actually happening?

The application is crashing/halting unexpectedly

---

Any insight into this issue pertaining the issues with modals & navigation would be greatly appreciated! 🙂

[keithgulbro]

Quick update on this issue. I've verified that the problem relates to Nativescript-Vue version 2.5.1

Downgrading to 2.4.0 resolves the underlying problem.

[rigor789]

Seems like for some reason, after closing the modal - the Frame instance (the wrapping Vue component) gets destroyed. I'm still looking for the reason for that.

[rigor789]

Update: TestModal.vue has a <Frame> and it uses the default id default - overriding the other frame the rest of the app is running in - adding a different id fixes the issue: https://play.nativescript.org/?template=play-vue&id=SrXcgV&v=19

I completely missed this at first glance - but it makes sense now.

https://github.com/nativescript-vue/nativescript-vue/commit/a2b0cd6dc19689cc1f5fbbacec79c5e7a49fcbee#diff-c7066f3e92bcad6c8156ffe597acaa48 is where we changed the frame id conflicts to not be handled (it was causing another issue with re-rendering where the frames would randomly get a new id - breaking navigation in some cases).

I think we missed to mark this as a breaking change. Oops 😒

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.