App crashes immediately on launch when devtools is open

[samtgarson]

App runs fine in every case (even when the plugin is enabled) unless vue-devtools electron app is running, in which case it crashes every time.

Not sure how much more context I can give, please let me know what more help I can give—finding this environment pretty tough to debug so far.

This worked previously, but since doing a significant upgrade of dependencies after a few months (nativescript-vue to 2.0.0, and other minor version bumps) this integration explodes consistently.

Full app can be found here.

Appreciate any help you can provide, this is making it much harder to build an app!

Relevant main.js:

import Vue from 'nativescript-vue'
import VueDevtools from 'nativescript-vue-devtools'

if (TNS_ENV !== 'production' && global.VUE_DEVTOOLS) {
  Vue.use(VueDevtools)
}

Relevant dependencies:

{
  "nativescript-vue": "^2.0.0",
  "tns-core-modules": "^5.3.2",
  "tns-ios": "^5.3.1",
  "nativescript-dev-webpack": "^0.21.2",
  "nativescript-socketio": "^3.2.1",
  "nativescript-toasty": "^1.3.0",
  "nativescript-vue-devtools": "^1.2.0"
}

Full crash log:

Successfully synced application com.samgarson.whatnext on device 39343DEC-018A-4986-A7EE-082112CE7038.
CONSOLE LOG file:///app/vendor.js:14220:24: [ReferenceError: Can't find variable: SocketManager]
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x110454d3b NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool, bool)
2   0x110482e80 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3   0x110d9f656 ffi_closure_unix64_inner
4   0x110da007a ffi_closure_unix64
5   0x114007f34 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__
6   0x114007b32 __CFRunLoopDoTimer
7   0x11400739a __CFRunLoopDoTimers
8   0x114001a1c __CFRunLoopRun
9   0x114000e11 CFRunLoopRunSpecific
10  0x11acfc1dd GSEventRunModal
11  0x11554981d UIApplicationMain
12  0x110d9febd ffi_call_unix64
13  0x12b7e9cd0
JavaScript stack trace:
1   srcBackendJs@file:///app/vendor.js:3904:2237
2   __webpack_require__@file:///app/vendor.js:663:31
3   @file:///app/vendor.js:678:35
4   ../node_modules/@vue/devtools/build/backend.js@file:///app/vendor.js:678:88
5   __webpack_require__@file:///app/bundle.js:76:34
6   connect@file:///app/vendor.js:6981:24
7   setupDevtools@file:///app/vendor.js:14205:23
8   invoke@file:///app/vendor.js:39812:26
9   tick@file:///app/vendor.js:39760:20
10  UIApplicationMain@[native code]
11  _start@file:///app/vendor.js:28702:22
12  run@file:///app/vendor.js:28744:9
13  $start@file:///app/vendor.js:27378:18
14  $start@file:///app/vendor.js:14237:25
15  @file:///app/bundle.js:2886:10
16  ./main.js@file:///app/bundle.js:2890:34
17  __webpack_require__@file:///app/bundle.js:76:34
18  checkDeferredModules@file:///app/bundle.js:45:42
19  @file:///app/bundle.js:149:38
20  anonymous@file:///app/bundle.js:150:12
21  evaluate@[native code]
22  moduleEvaluation@[native code]
23  promiseReactionJob@[native code]
24  require@[n<…>
JavaScript error:
file:///app/vendor.js:3904:2237: JS ERROR TypeError: undefined is not an object (evaluating 'socket.on')
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating 'socket.on')
at
1   srcBackendJs@file:///app/vendor.js:3904:2237
2   __webpack_require__@file:///app/vendor.js:663:31
3   @file:///app/vendor.js:678:35
4   ../node_modules/@vue/devtools/build/backend.js@file:///app/vendor.js:678:88
5   __webpack_require__@file:///app/bundle.js:76:34
6   connect@file:///app/vendor.js:6981:24
7   setupDevtools@file:///app/vendor.js:14205:23
8   invoke@file:///app/vendor.js:39812:26
9   tick@file:///app/vendor.js:39760:20
10  UIApplicationMain@[native code]
11  _start@file:///app/vendor.js:28702:22
12  run@file:///app/vendor.js:28744:9
13  $start@file:///app/vendor.js:27378:18
14  $start@file:///app/vendor.js:14237:25
15  @file:///app/bundle.js:2886:10
16  ./main.js@file:///app/bundle.js:2890:34
17  __webpack_require__@file:///app/bundle.js:76:34
18  checkDeferredModules@file:///app/bundle.js:45:42
19  @file:///app/bundle.js:149:38
2<…>

[ExcelNet-Public]

Having this same issue with app running NS 5.4 / Vuex 3.1.1 and other latest packages. If devtools not running app behaves just fine.

[vpiskunov]

Same here, on simply using vue init nativescript-vue/vue-cli-template to create the project, then tns run ios --hmr, opening devTools in Chrome & updating any file.

[asologor]

Same here. It worked in the previous project (about 1 month ago), but it doesn't work in the new one. Same error. iOS emulator.

[asologor]

Got this to work.

Steps:

1. Open package.json and remove next packages: @vue/devtools, nativescript-socketio, nativescript-toasty, nativescript-vue-devtools
2. rm -rf node_modules
3. npm i
4. npm i --save @vue/devtools nativescript-toasty nativescript-socketio nativescript-vue-devtools
5. rm -rf platforms
6. tns run ios --bundle

I did the same things before but used npm i --save-dev instead of npm i --save.

Dev tools shouldn't be used in production dependencies.

[hraynaud]

I was having the same issues. I tried removing the unsupported plugins as well as creating new app from scratch. Neither worked.

What resolved it for me was uninstalling and then re-installing the NativeScript preview app on my iPhone. (note: I avoided adding additionally plugins such as dev-tools etc so not sure if it would have worked wit them installed)

[mgkimsal]

@hraynaud - this worked for me as well. I'd installed "preview" about 2 months ago, and the App Store didn't show 'update' available, but there was version released a week ago (1.25.0?). Removing and reinstalling preview seemed to work.

[abishekrsrikaanth]

is there any update on this issue?

[cliplicht]

Informations

development machine os: macOS Catalina Version 10.15.2

Component nativescript has 6.3.3 version and is up to date.
Component tns-core-modules has 6.3.2 version and is up to date.
Component tns-android has 6.3.1 version and is up to date.
Component tns-ios has 6.3.0 version and is up to date.

Solution

comment out and then start the app. ( tns run ios --bundle )

main.ts

if(TNS_ENV !== 'production') {
  //Vue.use(VueDevtools)    
}

StackTrace

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x104b89d50 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x104bd13b0 -[TNSRuntime executeModule:referredBy:]
3   0x1043fd5d8
4   0x194d44e18 <redacted>
JavaScript stack trace:
handleCopy(file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:419:0)
at file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:101:0
at on(file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:47:0)
at emit(file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:81:0)
at devtoolPlugin(file:///node_modules/vuex/dist/vuex.esm.js:54:19)
at Store(file:///node_modules/vuex/dist/vuex.esm.js:357:18)
at ./store.ts(file:///app/store.ts:6:30)
at __webpack_require__(file:///app/webpack/bootstrap:750:0)
at fn(file:///app/webpack/bootstrap:120:0)
at file:///app/bundle.js:300:58
at ./main.ts(file:///app/bundle.js:314: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 moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
JavaScript error:
file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:419:0: JS ERROR ReferenceError: Can't find variable: HTMLElement
*** JavaScript call stack:
(
)
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: ReferenceError: Can't find variable: HTMLElement
at
handleCopy(file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:419:0)
at file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:101:0
at on(file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:47:0)
at emit(file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:81:0)
at devtoolPlugin(file:///node_modules/vuex/dist/vuex.esm.js:54:19)
at Store(file:///node_modules/vuex/dist/vuex.esm.js:357:18)
at ./store.ts(file:///app/store.ts:6:30)
at __webpack_require__(file:///app/webpack/bootstrap:750:0)
at fn(file:///app/webpack/bootstrap:120:0)
at file:///app/bundle.js:300:58
at ./main.ts(file:///app/bundle.js:314: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 moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stac<\M-b\M^@\M-&>
NativeScript caught signal 6.
Native Stack:
1   0x104bcffd4 sig_handler(int)
2   0x194c57424 <redacted>
3   0x194c5a8b8 pthread_kill
4   0x194beaa74 abort
5   0x194d023c8 __cxa_bad_cast
6   0x194d025c0 <redacted>
7   0x194c69308 <redacted>
8   0x194d0f634 <redacted>
9   0x194d0ef58 __cxa_get_exception_ptr
10  0x194d0ef10 <redacted>
11  0x194c69158 <redacted>
12  0x104b8a21c NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13  0x104bd13b0 -[TNSRuntime executeModule:referredBy:]
14  0x1043fd5d8
15  0x194d44e18 <redacted>

[b8ne]

For anyone using Vuex this answer fixed my issue https://stackoverflow.com/a/58753786/12997343