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:
- The app runs completely find outside of an emulator eg: running
npm run devand loading it up in the browser. - 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.
Environment
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
package.json
"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"
}
nuxt.config
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["@nuxtjs/ionic"],
css: ["@/theme/variables.css"],
ssr: false
})
ionic.config.json
{
"name": "nuxt-app",
"integrations": {
"capacitor": {}
},
"type": "vue"
}
capacitor.config.json
{
"appId": "brandchamp",
"appName": "brandchamp",
"webDir": "dist",
"server": {
"androidScheme": "https"
}
}