undefined is not an object (evaluating 'socket.on')

[brandon93s]

Version

6.x

Reproduction link

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

Platform and OS info

Preview / NativeScript 6.x / Windows 10

Steps to reproduce

$ npm install -g @vue/cli @vue/cli-init
$ vue init nativescript-vue/vue-cli-template <project-name>
$ cd <project-name>
$
$ npm install
$
$ tns preview

What is expected?

I am able to load the base CLI template app in Preview.

What is actually happening?

When loading the preview, the following error occurs: Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating 'socket.on').

Expand for full error

Error from preview output

LOG from device iPhone: CONSOLE INFO file:///app/vendor.js:6487:32: HMR: Hot Module Replacement Enabled. Waiting for signal.
CONSOLE INFO file:///app/vendor.js:6487:32: HMR: Checking for updates to the bundle with hmr hash ee6e2ced2dc490dac888.
CONSOLE INFO file:///app/vendor.js:6487:32: HMR: The following modules were updated:
CONSOLE INFO file:///app/vendor.js:6487:32: HMR:          ↻ ../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./components/App.vue?vue&type=script&lang=js&
CONSOLE INFO file:///app/vendor.js:6487:32: HMR:          ↻ ./components/App.vue?vue&type=script&lang=js&
CONSOLE INFO file:///app/vendor.js:6487:32: HMR:          ↻ ./components/App.vue
CONSOLE INFO file:///app/vendor.js:6487:32: HMR: Successfully applied update with hmr hash ee6e2ced2dc490dac888. App is up to date.
CONSOLE LOG file:///app/vendor.js:7431:24: '[ReferenceError: Can\'t find variable: SocketManager]'
2019-08-24 21:03:27.487 nsplaydev[1965:323198] ***** Fatal JavaScript exception - application has been terminated. *****
2019-08-24 21:03:27.487 nsplaydev[1965:323198] Native stack trace:
1   0x10313a048 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10316cd70 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3   0x103c5a05c ffi_closure_SYSV_inner
4   0x103c5c1b4 .Ldo_closure
5   0x1875fc0c8 __NSFireTimer
6   0x186aeb1b8 <redacted>
7   0x186aeaee4 <redacted>
8   0x186aea6c8 <redacted>
9   0x186ae5398 <redacted>
10  0x186ae4964 CFRunLoopRunSpecific
11  0x188d25d8c GSEventRunModal
12  0x1b3f81758 UIApplicationMain
13  0x103c5c044 ffi_call_SYSV
14  0x103c59780 ffi_call_int
15  0x103c5927c ffi_call
16  0x1030fcf54 NativeScript::FunctionWrapper::call(JSC::ExecState*)
17  0x103c58488 llint_entry
18  0x103c56804 llint_entry
19  0x103c56804 llint_entry
20  0x103c56804 llint_entry
21  0x103c56804 llint_entry
22  0x103c56804 llint_entry
23  0x103c56804 llint_entry
24  0x103c56804 llint_entry
25  0x103c56804 llint_entry
26  0x103c56764 llint_entry
27  0x103c56804 llint_entry
28  0x103c422ac vmEntryToJavaScript
29  0x1038cfebc JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
30  0x103aa4f98 JSC::call(JSC::ExecState*, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&, WTF::NakedPtr<JSC::Exception>&)
31  0x103114ec8 NativeScript::GlobalObject::moduleLoaderEvaluate(JSC::JSGlobalObject*, JSC::ExecState*, JSC::JSModuleLoader*, JSC::JSValue, JSC::JSValue, JSC::JSValue)
2019-08-24 21:03:27.488 nsplaydev[1965:323198] JavaScript stack trace:
2019-08-24 21:03:27.488 nsplaydev[1965:323198] 1   srcBackendJs@file:///app/vendor.js:3254:2237
2   __webpack_require__@file:///app/vendor.js:12:31
3   @file:///app/vendor.js:27:35
4   ../node_modules/@vue/devtools/build/backend.js@file:///app/vendor.js:27:88
5   __webpack_require__@file:///app/runtime.js:751:34
6   fn@file:///app/runtime.js:121:39
7   connect@file:///app/vendor.js:6334:24
8   setupDevtools@file:///app/vendor.js:7416:23
9   invoke@file:///app/tns_modules/tns-core-modules/timer/timer.js:53:50
10  tick@file:///app/tns_modules/tns-core-modules/timer/timer.js:18:20
11  UIApplicationMain@[native code]
12  _start@file:///app/tns_modules/tns-core-modules/application/application.js:277:22
13  run@file:///app/tns_modules/tns-core-modules/application/application.js:305:9
14  $start@file:///app/tns_modules/nativescript-vue/dist/index.js:14093:18
15  $start@file:///app/vendor.js:7448:25
16  @file:///app/bundle.js:413:10
17  ./main.js@file:///app/bundle.js:417:34
18  __webpack_require__@file:///app/runtime.js:751:34
19  checkDeferredModules@file:///app/runtime.js:44:42
20  webpackJsonpCallback@file:///app/runtime.js:31:39
21  anonymous@file:///app/bundle.js:2:61
22  evaluate@[native code]
23  moduleEvaluation@[native code]
24  promiseReactionJob@[native code]
2019-08-24 21:03:27.488 nsplaydev[1965:323198] JavaScript error:
file:///app/vendor.js:3254:2237: JS ERROR TypeError: undefined is not an object (evaluating 'socket.on')
2019-08-24 21:03:27.491 nsplaydev[1965:323198] PlayLiveSync: Uncaught Exception
2019-08-24 21:03:27.492 nsplaydev[1965:323198] *** JavaScript call stack:
(
        0   UIApplicationMain@[native code]
        1   _start@file:///app/tns_modules/tns-core-modules/application/application.js:277:22
        2   run@file:///app/tns_modules/tns-core-modules/application/application.js:305:9
        3   $start@file:///app/tns_modules/nativescript-vue/dist/index.js:14093:18
        4   $start@file:///app/vendor.js:7448:25
        5   @file:///app/bundle.js:413:10
        6   ./main.js@file:///app/bundle.js:417:34
        7   __webpack_require__@file:///app/runtime.js:751:34
        8   checkDeferredModules@file:///app/runtime.js:44:42
        9   webpackJsonpCallback@file:///app/runtime.js:31:39
        10  anonymous@file:///app/bundle.js:2:61
        11  evaluate@[native code]
        12  moduleEvaluation@:1:11
        13  promiseReactionJob@:1:11
)
2019-08-24 21:03:27.492 nsplaydev[1965:323198] *** 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:3254:2237
2   __webpack_require__@file:///app/vendor.js:12:31
3   @file:///app/vendor.js:27:35
4   ../node_modules/@vue/devtools/build/backend.js@file:///app/vendor.js:27:88
5   __webpack_require__@file:///app/runtime.js:751:34
6   fn@file:///app/runtime.js:121:39
7   connect@file:///app/vendor.js:6334:24
8   setupDevtools@file:///app/vendor.js:7416:23
9   invoke@file:///app/tns_modules/tns-core-modules/timer/timer.js:53:50
10  tick@file:///app/tns_modules/tns-core-modules/timer/timer.js:18:20
11  UIApplicationMain@[native code]
12  _start@file:///app/tns_modules/tns-core-modules/application/application.js:277:22
13  run@file:///app/tns_modules/tns-core-modules/application/application.js:305:9
14  $start@file:///app/tns_modules/nativescript-vue/dist/index.js:14093:18
15  $start@file:///app/vendor.js:7448:25
16  @file:///app/bundle.js:413:10
17  ./main.js@file:///app/bundle.js:417:34
18  __webpack_require__@file:///app/runtime.js:751:34
19  checkDeferredModules@file:///app/runtime.js:44:42
20  webpackJsonpCallback@file:///app/runtime.js:31:39
21  anonymous@file:///app/bundle.js:2:61
22  evaluate@[native code]
23  moduleEvaluation@[native code]
24  promiseReactionJob@[native code]
', reason: '(null)'
*** First throw call stack:
(0x186b5aab8 0x185d5fd00 0x10313a48c 0x10316cd70 0x103c5a05c 0x103c5c1b4 0x1875fc0c8 0x186aeb1b8 0x186aeaee4 0x186aea6c8 0x186ae5398 0x186ae4964 0x188d25d8c 0x1b3f81758 0x103c5c044 0x103c59780 0x103c5927c 0x1030fcf54 0x103c58488 0x103c56804 0x103c56804 0x103c56804 0x103c56804 0x103c56804 0x103c56804 0x103c56804 0x103c56804 0x103c56764 0x103c56804 0x103c422ac 0x1038cfebc 0x103aa4f98 0x103114ec8 0x1032749a0 0x103c581ec 0x103c56804 0x103c56804 0x103c422ac 0x1038cfebc 0x103aa5164 0x10326dd0c 0x10310bd88 0x103179f50 0x1041c9b14 0x1029e7428 0x1865a0fd8)
libc++abi.dylib: terminating with uncaught exception of type NSException
2019-08-24 21:03:27.492 nsplaydev[1965:323198] PlayLiveSync: Uncaught Exception

[rigor789]

You can't use VueDevtools with tns preview (only when running locally with tns run), when creating the project, make sure to say "No" to the devtools prompt, or comment out the following lines in main.js

import VueDevtools from 'nativescript-vue-devtools'

Vue.use(VueDevtools)

[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.