How to debug "deviceready has not fired after 5 seconds"?

[ptmkenny]

After updating to Capacitor 3, when I launch my iOS app, I get a blank screen and see deviceready has not fired after 5 seconds in the console.

I followed the upgrade guide and added the plugins separately. I also added App, Haptics, and Keyboard for Ionic.

My app builds and runs on my computer using ionic serve. But, when I run ionic build; ionic cap copy ios and then install with Xcode to my iPhone, I get the deviceready has not fired error. I get the same error when I run npx cap run ios and install to iPhone.

I tried editing the code to my app and removing all calls to plugins; when I did that, I get a blank screen and no error at all in the console.

So then I tried deleting the ios app and re-creating with ionic cap add ios, but I still have the same problem.

This is similar to the issue #4366 but I am importing import '@capacitor/core'; in the index file.

Any ideas about how I can debug what is wrong? Since it works on my computer and only fails on iPhone with a single error, I'm really having trouble figuring out what to do.

More info: I tried debugging in Android, and I get the same error. Android Studio console has more informative debugging info:

2021-04-07 17:05:02.639 1264-1264/com.myapp.myappname D/Capacitor: App started
2021-04-07 17:05:02.642 1264-1264/com.myapp.myappname D/Capacitor/AppPlugin: Firing change: true
2021-04-07 17:05:02.643 1264-1264/com.myapp.myappname V/Capacitor/AppPlugin: Notifying listeners for event appStateChange
2021-04-07 17:05:02.643 1264-1264/com.myapp.myappname D/Capacitor/AppPlugin: No listeners found for event appStateChange
2021-04-07 17:05:02.646 1264-1264/com.myapp.myappname D/Capacitor: App resumed
2021-04-07 17:05:02.666 1264-1264/com.myapp.myappname D/ViewRootImpl@1c633da[MainActivity]: setView = com.android.internal.policy.DecorView@f6fdbb9 TM=true MM=false
2021-04-07 17:05:02.704 1264-1345/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/
    2021-04-07 17:05:02.729 1264-1264/com.myapp.myappname V/Capacitor/NetworkPlugin: Notifying listeners for event networkStatusChange
2021-04-07 17:05:02.729 1264-1264/com.myapp.myappname D/Capacitor/NetworkPlugin: No listeners found for event networkStatusChange
2021-04-07 17:05:02.733 1264-1264/com.myapp.myappname V/InputMethodManager: Not IME target window, ignoring
2021-04-07 17:05:02.767 1264-1264/com.myapp.myappname D/ViewRootImpl@1c633da[MainActivity]: Relayout returned: old=(0,0,1080,2220) new=(0,0,1080,2220) req=(1080,2220)0 dur=9 res=0x7 s={true 492229259264} ch=true
2021-04-07 17:05:02.767 1264-1307/com.myapp.myappname D/OpenGLRenderer: createReliableSurface : 0x729b345a40, 0x729b267000
2021-04-07 17:05:02.774 1264-1307/com.myapp.myappname D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000
2021-04-07 17:05:02.783 1264-1307/com.myapp.myappname W/Gralloc3: mapper 3.x is not supported
2021-04-07 17:05:02.785 1264-1307/com.myapp.myappname I/gralloc: Arm Module v1.0
2021-04-07 17:05:02.874 1264-1345/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/webapp/static/css/4.672a8906.chunk.css
    2021-04-07 17:05:02.879 1264-1344/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/webapp/static/css/main.82724720.chunk.css
    2021-04-07 17:05:02.883 1264-1264/com.myapp.myappname D/ViewRootImpl@1c633da[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1
2021-04-07 17:05:02.884 1264-1264/com.myapp.myappname D/InputMethodManager: prepareNavigationBarInfo() DecorView@f6fdbb9[MainActivity]
2021-04-07 17:05:02.884 1264-1264/com.myapp.myappname D/InputMethodManager: getNavigationBarColor() -855310
2021-04-07 17:05:02.886 1264-1335/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/webapp/static/js/runtime-main.3f8d6c6a.js
    2021-04-07 17:05:02.889 1264-1338/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/webapp/static/js/4.bf365e3d.chunk.js
    2021-04-07 17:05:02.891 1264-1336/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/webapp/static/js/main.30ddfee6.chunk.js
    2021-04-07 17:05:02.893 1264-1264/com.myapp.myappname D/InputMethodManager: prepareNavigationBarInfo() DecorView@f6fdbb9[MainActivity]
2021-04-07 17:05:02.893 1264-1264/com.myapp.myappname D/InputMethodManager: getNavigationBarColor() -855310
2021-04-07 17:05:02.893 1264-1264/com.myapp.myappname V/InputMethodManager: Starting input: tba=com.myapp.myappname ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
2021-04-07 17:05:02.894 1264-1264/com.myapp.myappname D/InputMethodManager: startInputInner - Id : 0
2021-04-07 17:05:02.894 1264-1264/com.myapp.myappname I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus
2021-04-07 17:05:02.908 1264-1264/com.myapp.myappname D/ViewRootImpl@1c633da[MainActivity]: MSG_RESIZED: frame=(0,0,1080,2220) ci=(0,63,0,126) vi=(0,63,0,126) or=1
2021-04-07 17:05:02.913 1264-1264/com.myapp.myappname I/Capacitor/Console: File: http://localhost/ - Line 1462 - Msg: onscript loading complete
    2021-04-07 17:05:02.917 1264-1264/com.myapp.myappname D/InputMethodManager: prepareNavigationBarInfo() DecorView@f6fdbb9[MainActivity]
2021-04-07 17:05:02.917 1264-1264/com.myapp.myappname D/InputMethodManager: getNavigationBarColor() -855310
2021-04-07 17:05:02.918 1264-1264/com.myapp.myappname V/InputMethodManager: Starting input: tba=com.myapp.myappname ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
2021-04-07 17:05:02.918 1264-1264/com.myapp.myappname D/InputMethodManager: startInputInner - Id : 0
2021-04-07 17:05:02.955 1264-1344/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/css/main.82724720.chunk.css
    2021-04-07 17:05:02.955 1264-1345/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/css/4.672a8906.chunk.css
    2021-04-07 17:05:02.956 1264-1335/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/runtime-main.3f8d6c6a.js
    2021-04-07 17:05:02.956 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/4.bf365e3d.chunk.js
    2021-04-07 17:05:02.957 1264-1336/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/main.30ddfee6.chunk.js
    2021-04-07 17:05:02.957 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/css/4.672a8906.chunk.css
    2021-04-07 17:05:02.958 1264-1336/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/runtime-main.3f8d6c6a.js
    2021-04-07 17:05:02.958 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/css/main.82724720.chunk.css
    2021-04-07 17:05:02.960 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/css/4.672a8906.chunk.css
    2021-04-07 17:05:02.960 1264-1336/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/4.bf365e3d.chunk.js
    2021-04-07 17:05:02.960 1264-1335/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/main.30ddfee6.chunk.js
    2021-04-07 17:05:02.961 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/runtime-main.3f8d6c6a.js
    2021-04-07 17:05:02.962 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/css/main.82724720.chunk.css
    2021-04-07 17:05:02.964 1264-1335/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/main.30ddfee6.chunk.js
    2021-04-07 17:05:02.970 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/static/js/4.bf365e3d.chunk.js
    2021-04-07 17:05:02.978 1264-1264/com.myapp.myappname E/Capacitor/Console: File: http://localhost/ - Line 215 - Msg: Uncaught TypeError: Capacitor.createEvent is not a function
    2021-04-07 17:05:02.986 1264-1338/com.myapp.myappname D/Capacitor: Handling local request: http://localhost/webapp/assets/icon/favicon.png
    2021-04-07 17:05:02.986 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/assets/icon/favicon.png
    2021-04-07 17:05:02.988 1264-1338/com.myapp.myappname I/chatty: uid=10052(com.myapp.myappname) ThreadPoolForeg identical 1 line
2021-04-07 17:05:02.990 1264-1338/com.myapp.myappname E/Capacitor: Unable to open asset URL: http://localhost/webapp/assets/icon/favicon.png
    2021-04-07 17:05:07.887 1264-1264/com.myapp.myappname I/Capacitor/Console: File: http://localhost/ - Line 1225 - Msg: deviceready has not fired after 5 seconds.

So there are at least two problems here, first Uncaught TypeError: Capacitor.createEvent is not a function:

2021-04-07 17:05:02.978 1264-1264/com.myapp.myappname E/Capacitor/Console: File: http://localhost/ - Line 215 - Msg: Uncaught TypeError: Capacitor.createEvent is not a function

And second, a bunch of Unable to open asset URL: http://localhost/webapp/static/css/main.82724720.chunk.css

[jcesarmobile]

At the moment this step that says "it's a good idea", it's really required

https://capacitorjs.com/docs/v3/updating/3-0#importing-capacitorcore

We are working in a fix so it's not required, but you'll need to import @capacitor/core for now

[ptmkenny]

Thank you for replying, but I am already importing capacitor/core in index.tsx:

import '@capacitor/core'; // Include capacitor js bridge.
import React from 'react';
import ReactDOM from 'react-dom';
import { IAPProduct, InAppPurchase2 } from '@ionic-native/in-app-purchase-2';
import * as serviceWorker from './serviceWorker';
import './assets/extension.css';
import App from './App';
import {
  isSubscribedIAP, subAnnual, subMonthly,
} from './utils/globals';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
};

[ptmkenny]

I found the issue. I had installed Playwright to do tests, so I set the homepage: in package.json to /webapp, but this breaks react builds (and so Ionic builds) as described in this stack overflow issue.

Deleting the line homepage: /webapp in package.json solved the issue.