1

it seems a week or so ago, nativescript lost the ability to talk to the vue devtools. See this issue on github. Run this repo to reproduce -- (you will need to change the host variable in main.js to your computer's network address).

Here are some things I've tried:

  1. Several different networks, including wired, public and private wifi, and mobile hotspot
  2. Local Android emulator with host set to "localhost" and also host excluded.
  3. Physical android device Samsung S9 with latest Android OS
  4. Took the code from nativescript-vue-devtools package and added console logging. Appears to be getting stuck when connecting to the devtools socket in the connect_error -> reconnect loop. Unfortunately the arguments to the connect error event are null so there's no clear reason why it's failing.

Here is the package.json from that project -- they are all defaults after using the CLI to initialize the project:

{
  "name": "nsvue-devtools-test",
  "version": "1.0.0",
  "description": "A native application built with NativeScript-Vue",
  "author": "Will P.",
  "license": "MIT",
  "nativescript": {
    "id": "org.nativescript.application",
    "tns-ios": {
      "version": "5.0.0"
    },
    "tns-android": {
      "version": "5.0.0"
    }
  },
  "dependencies": {
    "vuex": "^3.0.1",
    "@vue/devtools": "5.0.0-beta.3",
    "nativescript-socket.io": "^0.9.0",
    "nativescript-vue-devtools": "^1.0.0",
    "nativescript-toast": "^1.4.6",
    "nativescript-vue": "^2.0.0",
    "tns-core-modules": "^5.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "next",
    "nativescript-vue-template-compiler": "^2.0.0",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.1.0",
    "vue-loader": "^15.2.6",
    "webpack": "^4.16.4",
    "webpack-bundle-analyzer": "~2.13.1",
    "webpack-cli": "^3.1.0"
  }
}

I have also tried on another project using the latest versions of nativescript toast and vue devtools with the same result -- vue devtools never changes from the default screen.

I am able to use termux with nmap to scan from my debugging device and see that my IP/port is open. I am also able to make a very basic website, add a vue instance, and paste the script tag shown in the developer tools UI to show that the devtools are working properly.

Nativescript: you are losing users to react native over this problem (see comments in the issue link above). Vue devtools just released a new version advertising better nativescript support, but we are completely unable to even try it out!

Since Nativescript's community has moved here, I am really just hoping to catch the attention of the devs to get this issue resolved. If anyone else is able to provide a workaround or solution to this problem that would be appreciated as well.

Thanks in advance!

Will P.
  • 8,437
  • 3
  • 36
  • 45

2 Answers2

3

To get my android emulator running NativeScript vue app talking to Vue Devtools electron app, I needed to set android to allow clear text traffic

In AndroidManifest.xml set android:usesCleartextTraffic="true" on the existing node. for example

<application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"
    >

This solution was from this comment https://github.com/nativescript-vue/nativescript-vue-devtools/issues/8#issuecomment-496292399

It might be also possible to solve this by creating or modifying the network_security_config.xml file.

I doubt this is a change that you would want to commit and have in production, so I am using it only in local development.

Julian Orinyol
  • 576
  • 5
  • 4
1

Could you try with this deps in your package.json:

"nativescript-toasty": "^1.3.0",
"nativescript-socketio": "^3.2.1",
"nativescript-vue-devtools": "github:anthonny/nativescript-vue-devtools#master",

I do not use nativescript-socket.io and nativescript-toast, but nativescript-socketio (without the .) and nativescript-toasty

It is more a workaround than a real solution but if it can help ;)

Anthonny
  • 1,591
  • 1
  • 9
  • 9
  • Hmm, sadly I'm getting the same behavior with those packages as well. I went ahead and copied the nativescript-vue-devtools code into my test project and set it up to log all of the socket events and it just seems to be stuck in the `connect_error` -> `reconnect` loop forever. Tried a couple different wifi networks at work and my mobile hotspot. Gonna give it a try from home to see if maybe network is causing issues. – Will P. Mar 28 '19 at 23:01