error when run cordova-serve-android (with vuetify plugin)

[osman-mohamad]

when I run cordova-serve-android . the application build successfully but it is just show blank page in the android device.

[m0dch3n]

is this from your existing project or from scratch?

from an existing project, you need to make sure every path is relative...

in serve mode, you can also connect your chrome remote devices, to your Android webview (Android 5.0 required), to receive more information about the problem...

[osman-mohamad]

is this from your existing project or from scratch? it is existing project. but I tried it with new project (after I opened this and it is working.

if you know vuetify . when I installed it as plugin with

vue add vuetify

then the blank page appeared . I do not know the problem . and I made this new project to know the origin of the problem. and it is seems from when vuetify used with this plugin .

how to debug this sort of project to know the problem origin ? like for example if there is a way to show console logs or devtools connected to the app after it launch.

thank you very much for responding.

[Benoit1980]

I have the exact same issue, blank page too with vuetify. completely stuck.... In the chrome://inspect console I see this error: Uncaught ReferenceError: Symbol is not defined

[m0dch3n]

I know vuetify, but did not try it. Nevertheless, in debug mode, you can easily check with remote devices on chrome, whats the problem... usually a blank page means, the app.js path is incorrect, is not loading etc...

in serve mode, you can btw also simply open the devserver page, in your browser, and when the cordova.js prompt messages popup, simply click on cancel always

[m0dch3n]

did you already try to add vuetify before ? Because most of the plugins do modify files, based on a default vue app, so maybe as the files were already modified by my plugin, vuetify isn't able to correctly modify them afterwards...

[Benoit1980]

It is the first time I use your plugin so I owuld not know. All I can say is that the demo app worked on the Android device as it is the first thing I tried before install vuetify from the CLI3 UI.

If you want the app, I can send it to you, it is just a new install with cordova, your plugin and vuetify. I wish I could debug the issue but I get a blank page when I click on the log link.

[Benoit1980]

I am trying to uninstall vuetify to see if I get any output. will let you know.

[m0dch3n]

sorry, I don't have time for personal advices or help... There are so many possible scenarios, that I'm only covering the default vue app...

If you need Material Design, you can also try vue add quasar this one worked out of the box

[Benoit1980]

thanks I will check it out.

[m0dch3n]

https://quasar-framework.org/

[Benoit1980]

Thanks.

[m0dch3n]

I gave it a try

vue create blabla (everything, except linter, because vuetify isn't respecting linting)
cd blabla
vue add vuetify
vue add cordova
npm run cordova-serve-android

On android 7.0

[m0dch3n]

PS the newer android is, the better chrome remote devices is working too...

[Benoit1980]

I am on android 4.4 When I have removed vuetify, I managed to get an app showing. I will retry with the above steps. If this does not work I will move to Quasar.

Thanks again!

[m0dch3n]

how to debug this sort of project to know the problem origin ? like for example if there is a way to show console logs or devtools connected to the app after it launch.

thank you very much for responding.

[m0dch3n]

I wish I could debug the issue but I get a blank page when I click on the log link.

the links etc often do not work, because everything is webpacked in app.js or vendor files... like you see the error above, in the node_modules files i.e.

[m0dch3n]

I am on android 4.4

maybe you need to polyfill some parts or update the webview, to support newer web features

https://play.google.com/store/apps/details?id=com.google.android.webview

4.4 is very old

[Benoit1980]

yes I will have to look into it, thanks.

[Benoit1980]

here it is, you are right: https://github.com/vuetifyjs/vuetify/issues/2388

[m0dch3n]

with all this out of support help, it seems, you can give my project a star now 🤣

[Benoit1980]

Yes I just did it :-) Thanks. Please do not close now the post as I will post here to the other user my findings on the polyfill which will perhaps help other users in the same trouble. thanks

[m0dch3n]

they'll find it also, when it's closed...

I closed it, because it's not an open issue, I need to fix on my code

[m0dch3n]

Yes I just did it :-) Thanks.

thanks

[Benoit1980]

Ok this is how the problem was fixed, hope it will help the first user who opened the thread + future users as Android 4.4 is still used by a few people.

1)You need to start the vue ui using the command prompt by typing the below command in the vue folder: vue ui

2)When the vue ui is started, click on the left menu "Dependencies", click on "Install dependency" and look for a dependency called "Babel-Polyfill". Install it.

3)Go to your project folder and open the file "main.ts". At the top of the file, make sure the polyfill goes first as:

import 'babel-polyfill';
import Vue from "vue";
import Vuetify from "vuetify";

4)Connect your Android app via usb

5)Go back to the Vue ui and click on "Task" >> "Cordova-server-android"

The app should install and work right away.

Hope this helps.

[osman-mohamad]

thank you very much @FreddyCrugger for the solution.

and thank you @m0dch3n for the great work on this plugin.

[Benoit1980]

You are more than welcome Osman-mohamad.