nativescript-vue/nativescript-vue-devtools

`tns preview` crashes when the app uses `nativescript-vue-devtools`

sis0k0 opened this issue · 1 comments

sis0k0 commented

Environment

  • nativescript: 6.0.3
  • nativescript-vue: 2.4.0
  • Preview app version: 1.23.0

Describe the bug
Using the nativescript-vue-devtools plugin with tns preview causes the app to crash with the following error:

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: 2359

StackTrace: 
	Frame: function:'srcBackendJs', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 3254, column: 2360
	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: 7418, column: 16
	Frame: function:'Vue.$start', file:'file:///data/data/org.nativescript.preview/files/app/vendor.js', line: 7446, column: 7
	Frame: function:'', file:'file:///data/data/org.nativescript.preview/files/app/bundle.js', line: 330, column: 4
	Frame: function:'./main.js', 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

To Reproduce
Execute:

vue init nativescript-vue/vue-cli-template devtools-test-project
cd devtools-test-project
tns preview

Make sure that nativescript-vue-devtools is used:
app/main.js

import VueDevtools from 'nativescript-vue-devtools';

Vue.use(VueDevtools);

...

Expected behavior
Debugging with nativescript-vue-devtools should work with tns preview.

Additional context
The nativescript-vue-devtools package uses nativescript-socketio which has native dependencies, but isn't part of the NativeScript Preview application. That might be the reason for the error.

rigor789 commented

@sis0k0 The issue is indeed that Preview does not include nativescript-socketio. Even if it did, the user would have to configure NativeScript-Vue Devtools to connect to their IP where they are running VueDevtools, I don't see how it could work out of the box unfortunately.

What we could do is just to make sure the app doesn't crash when running tns preview.

This is likely because we don't return anything when we fail to require socketio

nativescript-vue-devtools/index.js

Lines 74 to 76 in dc87603

} catch (error) {
console.log(error)
}

We can probably return an object that has on and emit methods that do nothing.

Or even better, we try/catch before overriding the $start method on the Vue prototype.

  • 👍1