Hey guys, Im trying to build my Ionic 6 Vue app, unfortunately capacitor gives me a blank app. Let me show you what I did:
And it brings this on the emulator:
Just a blank screen ;/
Any clue on whats happening here? somebody had this issue?
Thanks!
UPDATE**
When I run “ionic capacitor run android -l --host=192.168.1.14” command, it shows up the standalone emulator without opening Android Studio and the app runs without issues.
The issue comes when trying to run the app in Android Studio emulator, using the same device as with the command above (Pixel 3 Api 30). The app shows up the splash screen and then goes white.
The generated apk from Android Studio when installed in my smartphone shows white screen aswell.
Could it be a misconfiguration of Android Studio or the android project generated by Capacitor?
What does the console say?
Hi! Thanks for helping. Console throws a lot of things, here’s the paste Android Ionic Blank Screen Debug Log - Pastebin.com
I see an error in plugins:
D/Capacitor: Registering plugin: WebView
D/Capacitor: Registering plugin: App
D/Capacitor: Registering plugin: Haptics
D/Capacitor: Registering plugin: Keyboard
D/Capacitor: Registering plugin: StatusBar
D/Capacitor: Registering plugin: Storage
E/Capacitor: Unable to read file at path public/plugins
And a couple of:
E/chromium: [ERROR:gl_surface_egl.cc(549)] eglChooseConfig failed with error EGL_SUCCESS
I can’t figure it out why the app shows up in the emulator when using “ionic capacitor run android…” and not when I run it in Android Studio
And the APK generated in Android Studio shows blank screen…
I really need the APK for testing purposes ;/
Another thing Im worried about is this warning when Gradle builds the app for the emulator:
[capacitor] [warn] @capacitor/core@3.7.0 version doesn't match @capacitor/android@3.5.1 version.
[capacitor] Consider updating to a matching version, e.g. w/ npm install @capacitor/core@3.5.1
Should I update or downgrade packages?
You definitely should keep your core version inline with the android/iOS packages that go along side it. Something like npm i -E @capacitor/{core,android,ios}@3 should align everything to the latest v3 release for you.
White screen errors are typically caused by JS errors that prevent the webview from completing the initial load. You should be able to attach a chrome debug window to it and see if there are any logs. My go to check is:
- Load the app and get white screen
- Attach debugger
chrome://inspect - Reload webview from debugger with
window.location.reload() - See if any errors are present
Hopefully that will surface any potential errors that might be blocking you!
2 Likes
Very good and appreciated advice, I’m going to carry out tests to see what result I get. Thank you very much!
1 Like
Thanks again for the tips but the thing stills the same. I did the steps you suggested but when my webview reloads, devtools terminal is empty, no messages at all, that means I can’t debug anything.
We are thinking on hire somebody to help us get out of this blocking issue. I hear offers, no joke here, pm please.
Thanks!
After several attempts I am still stuck on this problem. The last thing I have tried is to connect to the APP from the Android emulator webviewer, with which I have managed to see some debug messages in Chrome.
The following warnings are appearing when loading the first screen of the APP, just after the Capacitor logo appears:
I have not discovered the cause of these warnings. Has anyone had this problem before?
I finally solved this problem. I’ll explain what I did:
- Created a new Ionic + Vue project
- Copied the source code from my current project to the new one
- Installed the dependencies
- In my particular case, I realized that @capacitor/storage is deprecated in favor of @capacitor/dependencies, so I updated the package and made the necessary code changes.
- Build and test
Finally say that I have not been able to know exactly what the error was, I did not get any message when debugging the app.
Cheers
1 Like