nativescript-vue tns generated application get TypeError: Cannot read property 'on' of undefined

Question

I generate an application as suggested by https://github.com/nativescript-vue/vue-cli-template:

vue init nativescript-vue/vue-cli-template test03
cd test03

npm install

tns build android

tns preview

At preview stage, I get the following error:

LOG from device HUAWEI P10 lite: com.tns.NativeScriptException: Error calling module function
TypeError: Cannot read property 'on' of undefined
File: "file:///data/data/org.nativescript.preview/files/app/vendor.js, line: 3254, column: 2085

StackTrace:
        Frame: function:'srcBackendJs', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 3254, column: 2086
        Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 12, column: 27
        Frame: function:'', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 27, column: 16
        Frame: function:'../node_modules/@vue/devtools/build/backend.js', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 27, column: 88
        Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.preview/files/app/runtime.js', line: 751, column: 30
        Frame: function:'fn', file:'file:///data/data/org.nativescript.preview/files/app/runtime.js', line: 121, column: 20
        Frame: function:'connect', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 6334, column: 5
        Frame: function:'setupDevtools', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 7417, column: 16
        Frame: function:'Vue.$start', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 7441, column: 7
        Frame: function:'', file:'file:///data/data/org.nativescript.preview/files/app/bundle.js', line: 329, column: 4
        Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.preview/files/app/bundle.js', line: 335, column: 30
        Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.preview/files/app/runtime.js', line: 751, column: 30
        Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.preview/files/app/runtime.js', line: 44, column: 23
        Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.preview/files/app/runtime.js', line: 31, column: 19
        Frame: function:'', file:'file:///data/data/org.nativescript.preview/files/app/bundle.js', line: 2, column: 57
        Frame: function:'require', file:'', line: 1, column: 266


TypeError: Cannot read property 'on' of undefined
        at com.tns.Runtime.runModule(Native Method)
        at com.tns.Runtime.runModule(Runtime.java:663)
        at com.tns.Runtime.run(Runtime.java:655)
        at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
        at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1122)
        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6619)
        at android.app.ActivityThread.-wrap2(Unknown Source:0)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066)
        at android.os.Handler.dispatchMessage(Handler.java:108)
        at android.os.Looper.loop(Looper.java:166)
        at android.app.ActivityThread.main(ActivityThread.java:7529)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:245)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:921)

I ran on Windows 10 and phone is Android Huawei.

vue --version
3.11.0

I tried with both Javascript and TypeScript, vuex both yes and no, and scheme none and light. None work.

score 2 · Answer 1 · answered Sep 08 '19 at 06:35

2

I get a response from Igor on Nativescript community slack. He mentioned that I enabled the vue devtools option when generating the application.

I re-generated an app select No on vue devtools, everything works.

answered Sep 08 '19 at 06:35

John Zen

81
4

this worked for me. and yes is the default option for vue devtools when generating an app – MitchBroadhead Jan 08 '20 at 15:40

Nero · Answer 2 · 2019-09-06T07:42:09.203

0

I have created a new test project here, followed all the steps and worked well.

Your possible further options:

Clear the previous installation
Follow the installation guide again but consider installing globally with npm (npm -g)
check tns doctor to see if all the requirements are installed and up to date ({N} 6.1 was released sept 3rd)
When all done, generate the new project with what you need
Install local dependencies with yarn (yarn handles Vue projects very well) - yarn install
run tns run android

ps: try to installing AVD or connect to a real device to be sure that works

edited Sep 06 '19 at 07:42

answered Sep 06 '19 at 07:29

Nero

36
6

Thanks @MatheusFelipe. I get a response from Igor on slack channel. The reason is that I enabled vue devtools when generating the App. I add a answer below for the benefit of others. – John Zen Sep 08 '19 at 06:32

score 0 · Answer 3 · answered Nov 21 '19 at 23:26

I had the same error. It is caused by the package @vue/devtools interacting with nativescript-socketio when the VueDevTools are used.

To fix it, uninstall the package nativescript-socketio from the devDependencies and install it back as a normal dependency:

yarn remove nativescript-socketio && yarn add nativescript-socketio

nativescript-vue tns generated application get TypeError: Cannot read property 'on' of undefined

3 Answers3