Vue Cordova Blank screen on W10

[RaulGF92]

I have a Vue2 App, when i try to use vue-cordova-cli on mine app for deploy on android's device, it doesn't works and only look a with blank screen, i look for all sites of internet for look the solution with not luck.

I display you the configuration that i have:

• System Operative: Windows 10
• CLI: Powershell (Administrative Privilege)
• Android: 7.1.1
• Commands npm

  vue add cordova
  npm run cordova-prepare
  npm run cordova-serve-android

• main.js

  
  import Vue from 'vue'
  import App from './App.vue'

Vue.config.productionTip = false

new Vue({ render: h => h(App), }).$mount('#app')

- **vue.config.js**

module.exports = { publicPath: '', pluginOptions: { cordovaPath: 'src-cordova' } }

More info: All my test are doing using my device connect to my pc using a usb link and i have a lot of deploy previously to that using that way.

[m0dch3n]

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/84

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/78

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/55

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/68

[m0dch3n]

do have any libraries who maybe need to be transpiled ? check the error in "remote devices" under chrome

[m0dch3n]

https://developers.google.com/web/tools/chrome-devtools/remote-debugging

[RaulGF92]

Well.... that is the point, the remote device when i enter on the app not print any fail and not launch any app.

Then i have a hello-world app of vue (vue create hello-world) so i don't have any library with a compile problems or maybe vue cli inject any dependency that must be compile.

Now i were trying using @babel/pollyfill on my app and the problem still here, so the problem isn't is the ES6 vs ES5.

Also, i tried use Android 7 and 8

[krthush]

Thought I'd chime in on this as well, just starting from scratch and tried to serve onto an Android platform (Samsung s8+ with Android Pie (9)). When the app launches I just get a white screen, sometimes I get a pop up error saying Application Error: The connection to the server was unsuccesful (https://"192.168.56.1:8080")

On a side note, I tried running my emulator with an Pixel 3 XL running Android 10.0 and it seems to work fine as shown below:

Then I tried on a Pixel 2 running Android 7.0 and it was succesful as well... shown here:

At this stage I suspect it was an issue with my physical device, so I tried another Android phone (my team member's Moto G5 running Android 8.1) we had the same issue of a white screen.

[krthush]

I tried increasing the timeout by adding this to the config.xml... <preference name="loadUrlTimeoutValue" value="60000" />

Didn't really help

[ivanorezac]

I got the same issues on android and iOS, so I created an empty project to try with it and problems continued. I suspect it has something to do with the remote url being served over https, as well as something with the way this plugin runs serve.

cordova-serve-android Works on Android simulator. On Android physical devices, I always get the error "The connection to the server was unsuccessful (https://192.168.0.15:8080)". The IP matches my mac's local IP, phone is connected to the same router and the port is the one served. To debug, I ran it from Android Studio: After running "cordova-prepare" and "cordova run android" from "src-cordova" directory, I have been able to run the app on Android device as well.

cordova-build-android When running cordova-build-android, I can't install the app, but that's because it only generates the unsigned version and I need the debug one (because I didn't set the developer key yet). Workaround worked - running cordova-prepare and than going into the src-cordova folder and running "cordova build android".

cordova-serve-ios On iOS, it doesn't work on remote devices, nor the simulator. I get the splash screen and then it goes to the blank white one. To Debug, I tried to run from Xcode. In the console, when running on Simulator I get the "NSURLErrorDomain" error: Same error appears when running on the device: After running "cordova-prepare", I have been able to run "cordova run ios" from src-cordova folder and to build on Xcode.

cordova-serve-browser This does work on a browser very well. However, I can not open this on any mobile device - loading gets stuck at about 75% and stays there. It does however work when I go to the "src-cordova" folder and run "cordova serve 8080" (or leave the port empty, but 8080 is the one cordova-serve-browser used).

[Pijuli]

Same errors here, not working at all, Android and iOS First network call on the app stays in pending until it fails

Edit: there's something wrong with the config.

• Android emulator: stuck in deploying to emulator
• Android phone: works with pc over wifi, doesn't work with pc on lan
• iOS emulator: white screen

Haven't had any issue with cordova alone, nor quasar, nor vue development with reload. Something is wrong :/

[m0dch3n]

So basically you are all using Win 10 as OS ?

I use macOS where everything works just fine...

Can you open the app (after running cordova-serve-android) in win 10 with a browser like chrome or firefox ? Because cordova basically is also just a browser in full screen, trying to open your dev page under i.e. https://192.168.0.1:8080, for any cordova-serve-* command.

Unfortunately I don't have Win 10, so I can't help, but it sounds like it's related to the network layer of windows

So maybe you can try without https (not sure if latest cordova still works without https), maybe Win 10 is blocking to create a server on port 8080, maybe Win 10 has a firewall

[Pijuli]

macOS Catalina here... T_T How can I disable https?

Edit: Android seems to be working now... so weird. I've enabled lan again. n.p. iOS is still stuck in the white screen, no errors at all...

[m0dch3n]

https://cli.vuejs.org/config/#devserver

[m0dch3n]

module.exports = {
  devServer: {
    https: false
  }
}

[Pijuli]

Now iOS works and Android fails with Cleartext HTTP traffic not permitted error... Fix something, break something. Nice T_T

[ivanorezac]

So basically you are all using Win 10 as OS ?

I use macOS where everything works just fine...

Can you open the app (after running cordova-serve-android) in win 10 with a browser like chrome or firefox ? Because cordova basically is also just a browser in full screen, trying to open your dev page under i.e. https://192.168.0.1:8080, for any cordova-serve-* command.

Unfortunately I don't have Win 10, so I can't help, but it sounds like it's related to the network layer of windows

So maybe you can try without https (not sure if latest cordova still works without https), maybe Win 10 is blocking to create a server on port 8080, maybe Win 10 has a firewall

I'm actually using MacOS Catalina as well, just didn't want to open a different issue for the same problem.

Now iOS works and Android fails with Cleartext HTTP traffic not permitted error... Fix something, break something. Nice T_T

I was able to bypass that with https://stackoverflow.com/questions/54752716/why-am-i-seeing-neterr-cleartext-not-permitted-errors-after-upgrading-to-cordo However, I got connection unsuccessful error afterwards.

iOS works fine with http for me as well. I'll report back when I get the time to debug android some more.

[m0dch3n]

The error with cleartext is what I thought, with cordova 8 you need https, I think

In my company, I'm using a .dev domain and a letsencrypt certificate, because it's closer then to the production environment with https enabled, to test things...

But I know, this is maybe an overkill setup, to just quickly get things wrapped up and start developping

Anyway on my macOS, and android 7.0 emulator, https is also working over IP

[wangxiaolong100]

@RaulGF92 @m0dch3n This is because vue dev server use first network device. In my case vbox host-only network is the first device, so vue serve use it ip 192.168.56.1, but this ip is machine local ip used by virtualbox, can not access from router,. when i disable this device, vue serve use my wlan device ip, all works.

[m0dch3n]

@wangxiaolong100

the wrong IP problem was also already discussed in the issues, unfortunately I currently don't have the time, to investigate further, but I think the best way to handle multiple IPs, is to prompt in this case, which IP serve should use...

[kaangokdemir]

module.exports = {
  devServer: {
    https: false
  }
}

I'm using MacOS Catalina 10.15.3 and thanks to @m0dch3n this lines solved my problem.

[m0dch3n]

btw I encountered blank screen now when using I'm wkwebview instead of uiwebview...

As Safari does not allow me to remote debug wkwebview currently, it's very difficult, to determine where the error comes from...

I suppose it's some polyfilling or transpiling problem, but I don't know, so any advice would be grateful, because IOS app store will deprecate new app submissions next month, when they use UIwebview and in december, they also no longer accept app updates...

[midasdev711]

Hi, I faced the same issue on ios and resolved it by disabling https. But I have another issue with it. After I disable https, then it returns CORS issue when it calls API. Is there another solution for this problem?

[ralcorta]

module.exports = {
  devServer: {
    https: false
  }
}

That was the solution for me!