Fresh Project: Android Shows White Screen

Hello, I’ve just run through the following nuxt/ionic tutorial in an effort to build a cross platform app. I’ve even followed their 2023 vue conf youtube video as well although they appear to be the same exact project.

Everything works fine until I run npx cap run android. After the app splash screen shows I get a blank white screen. I attached a chrome debugger and can see the following errors:

entry.8cac1e1d.js:1 [nuxt] error caught during app initialization TypeError: Cannot read properties of undefined (reading 'beforeResolve')
    at setup (entry.8cac1e1d.js:1:99853)
    at entry.8cac1e1d.js:1:77265
    at n (entry.8cac1e1d.js:1:77676)
    at Object.runWithContext (entry.8cac1e1d.js:1:32116)
    at Ao (entry.8cac1e1d.js:1:77706)
    at Object.runWithContext (entry.8cac1e1d.js:1:76353)
    at gp (entry.8cac1e1d.js:1:77246)
    at bp (entry.8cac1e1d.js:1:77401)
    at async al (entry.8cac1e1d.js:67:1546)
(anonymous) @ entry.8cac1e1d.js:1
localhost/:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://localhost/') with script ('https://localhost/sw.js'): An unknown error occurred when fetching the script.
/favicon.ico:1     Failed to load resource: the server responded with a status of 404 (Not Found)

I’m not sure what beforeResolve is from, I have a hunch it’s from webpack but I don’t believe these starter projects even use webpack so I may be wrong.

Here are some things I’ve tried:

  1. The app runs completely find outside of an emulator eg: running npm run dev and loading it up in the browser.
  2. I’ve tried installing a new device in android studio. Originally I was using API 33 on a Pixel XL and I’ve tried using API 33 on a Pixel 7 as well as API 34 on a Pixel 7 and neither worked.

Has anyone run into this before and can help?
I can see there are tons of these help posts for white screens and almost always the responses are to check devtools but in this case I don’t even understand these error messages. Clearly there’s some lifecycle hook somewhere that is expected but is not found due to some dependency issue.

Windows 11
Java 17.0.9+11-LTS-201
VSCode 1.83.1
Node 18.13.0
Android SDKs: Android 13.0 (“Tiramisu”) & Android API 34
Android Emulator 32.1.15
Android SDK Platform Tools: 34.0.5

"devDependencies": {
    "@capacitor/cli": "5.5.0",
    "@nuxt/devtools": "latest",
    "@nuxtjs/ionic": "^0.12.1",
    "@vue/cli-service": "5.0.8",
    "nuxt": "^3.7.4",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  "dependencies": {
    "@capacitor/android": "5.5.0",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.0",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6"


export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/ionic"],
  css: ["@/theme/variables.css"],
  ssr: false


  "name": "nuxt-app",
  "integrations": {
    "capacitor": {}
  "type": "vue"


  "appId": "brandchamp",
  "appName": "brandchamp",
  "webDir": "dist",
  "server": {
    "androidScheme": "https"

I just tried opening in android studio by running npx cap open android and gradle updated but I’m still getting the white screen even in android studio

Hi all…
I was facing the same issue and it took me 2 days of researching and changing etc…

Finally I could solve the issue:

First of all what caused the problem:

after running ionic serve and checking that everything works on web I did create the android version of the app with ionic capacitor add android
This went well and after running npx cap sync I got the error that the www folder doesn’t exist and you also get the notice to create the www folder with an index.html file in it by your self, which I did. Than did run again npx cap sync and this went well as well. Than open the project in android studio with npx cap open anroid and run the project on my actual phone and got the white screen, no error, nothing.

The problem was exactly the www folder with nothing than an empty index.html file.

after researching in many forums and githubs gathering all information together this was the solution:

  1. delete the android folder
  2. delete the www folder
  3. run: ionic capacitor add android
  4. run: ionic build (this will create the www folder with all needed html and js files in it)
  5. run: npx cap sync
  6. run: npx cap open andorid
  7. run the project on your phone.

that’s it.

Maybe a word to the ionic framework developers: npx cap sync could easily run ionic build in background in order to create the www folder with all needed files in it automatically.