Ionic vue project show blank page on the emulator

Ionic Framework Ionic Vue
1

Hi. I have an ionic vue project that shows a blank screen when I open it on an emulator. Thinking I missed something on my end I then created a new project using the Photo Gallery starter. It too is showing a blank page on the emulator. Any suggestions?

My project’s Ionic Info

Ionic:

   Ionic CLI       : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.8.4

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run                             : 1.5.0

System:

   NodeJS : v12.18.0 (/usr/local/bin/node)
   npm    : 7.23.0
   OS     : macOS Big Sur

Pacakge list

  "dependencies": {
    "@capacitor/camera": "^1.1.0",
    "@capacitor/core": "3.2.3",
    "@capacitor/filesystem": "^1.0.3",
    "@capacitor/ios": "^3.2.3",
    "@capacitor/network": "^1.0.3",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "autoprefixer": "^9",
    "axios": "^0.23.0",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "postcss": "^7",
    "swiper": "^6.8.4",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.2.1",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-rc.1"
  },
  "devDependencies": {
    "@capacitor/cli": "3.2.3",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "vue-cli-plugin-tailwind": "~2.0.6",
    "vue-jest": "^5.0.0-0"
  }
}

Screenshot 2021-10-20 at 20.03.07
Screenshot 2021-10-20 at 20.03.071920×1692 146 KB

2

There must be some error in the console, have a peek in the console using chrome://inspect

3

No errors on the console.

.npx cap init sets webDir to “public” but npm run build creates dist so I replaced public with dist

{
  "appId": "com.example.app",
  "appName": "lkr-aducator",
  "webDir": "dist",
  "bundledWebRuntime": false
}
1 Like
4 
npx cap init [name] [id] --web-dir=dist

can be configured when initializing capacitor

5

I’m having the same issue. I just followed the quickstart guide on the Ionic website.

  • I started with a blank ionic starter app using Vue: ionic start myApp blank --type vue
  • I removed typescript according to the quickstart guide
  • I ran the app ionic serve and it runs
  • I setup my project with Android ionic capacitor add android
  • At this point, I did forget to build before adding Android support and received an error or two, so I ran: ionic capacitor sync android
    • Note: The sync didn’t really do anything besides get a Gradle error to disappear. Forgetting to build: ionic build before running the command to add Android set the webDir to public instead of dist. Setting it correctly removed another error not finding an icon.
  • I opened my Android folder in Android Studio and tried to run. Result: blank screen. I did use Chrome to inspect at this point and results are below:
    Chrome inspect

EDIT: Just for giggles, I started from scratch. This time, I built using ionic build before adding the Android platform to Capacitor. And instead of using the sync command, I just used the copy command (ionic capacitor copy android). This resulted in the same errors seen using Chrome inspect above. NOTE: When opening the same directory in Android Studio, the project had some odd project errors. I invalidated the cache and restarted, fixing the project errors.

I have:

  • Android Studio Arctic Fox 2020.3.1 Update 3
  • I’m using the emulator with Pixel 2 API 24
  • NodeJS version 14.17.3
  • npm version 6.14.13
  • Windows 10 Pro

My package.json:

{
  "name": "myBlank",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/android": "3.2.5",
    "@capacitor/app": "1.0.5",
    "@capacitor/core": "3.2.5",
    "@capacitor/haptics": "1.1.2",
    "@capacitor/keyboard": "1.1.2",
    "@capacitor/status-bar": "1.0.5",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "core-js": "^3.6.5",
    "vue": "^3.2.1",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@capacitor/cli": "3.2.5",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "vue-jest": "^5.0.0-0"
  },
  "description": "An Ionic project"
}

I have no idea what these errors mean. I am new to the world of web. It’s frustrating when one can’t follow a quickstart guide with good results.

6

my suggestion is to follow the quickstart, make sure it runs… THEN remove the typescript so you can isolate the problem… right now you cannot be sure if it is an ionic issue or an issue you created when removing the typescript.

7

To me, it looks like the Gradle issue, try this
After you run ionic capacitor sync use ionic capacitor open this should open the android studio with the project,
Once there you should be prompted to update your packages including gradel. if not then good either ways proceed to the 4th or 5th icon from the extreme right corner which says Sync Project with Gradel File
Once the sync is done restart the app

8

Try updating your @ionic/cli, that version doesn’t work well with capacitor 3, latest is 6.17.1

I’ve tested 6.17.1 and it’s setting the webDir to dist as expected.

1 Like
9

Thanks for the suggestion. I ran through the quickstart, kept the typescript. No code changes. Same result - app opens on emulator with the same errors listed.

10

I ran through these suggestions and got the same result.

11

I was really hoping this was it. I have a suspicion that ‘versioning’ would be the problem. I updated the Ionic CLI to 6.17.1. I then went through the quickstart guide from scratch, creating a new sample application. Same white screen of death, same errors using Chrome inspect.

12

Yeah, my answer was for the OP, yours look like an old WebView.
Capacitor 3 requires Chrome/Chromium/System WebView >= 60 and old emulators have old WebViews that can’t be updated and show that kind of errors. Try on a newer emulator or on a real device.

13

Yep, the issue was the emulator. I was walking through the API levels when you posted, jcesarmobile. Looks like I must be at API 28 or higher.

Ionic documentation ‘suggests’ an API level, but leaves it open for the user to pick whatever they wish.

Capacitor documentation states API 21 or higher.

Looks like documentation should be updated.

1 Like
14

No, Capacitor supports API 21, but also requires chrome/chromium/system WebView > 60.

Since Android 5 the WebView is updatable, but not in old emulators and they were shipped with old WebView versions, so you can’t test on those.

I think the first emulator where the WebView can be updated was the SDK 24 one, but you need to pick the “Google Play” image.

15

Hi, sorry, I wasn’t clear. As a newcomer to both web technology and Ionic, reading the quickstart guides (for both Ionic as well as Capacitor), it is unclear what is supported for the emulators. In the Capacitor docs, for example, it has the section ‘Android Support’. As someone who is new to all this, I read that to mean both emulators and real devices.

I’ve come across a lot of forum questions and problems with the ‘white screen of death’. Newbies are constantly getting tripped up, especially if they are new to these technologies, which seems to indicate documentation could be better.

1 Like