search

nativescript-vue / nativescript-vue-devtools

A NativeScript-Vue plugin for connecting to the standalone vue-devtools
https://nativescript-vue.org/en/docs/getting-started/vue-devtools/
MIT License
28 stars 7 forks source link

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

Closed sis0k0 closed 4 years ago

sis0k0 commented 5 years ago

Environment

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 5 years ago

@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

https://github.com/nativescript-vue/nativescript-vue-devtools/blob/dc876038d56bb7ae9a1a0f4d77b546d2c41b03e1/index.js#L74-L76

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.