Ok, progress was made! Since I managed to narrow it down to a JS / Browser issue, the next step was the console. Which is obviously missing on an iOS device. However, it’s easily “enabled” using Safari and a remote development console: Debugging Capacitor iOS Apps | john borges
After enabling this, and pressing the Reload button (otherwise you’d just be staring at a blank console) - I finally got an error.
[Error] Did not parse stylesheet at 'capacitor://localhost/assets/index.651fdced.css' because non CSS MIME types are not allowed in strict mode.
Another small win - in trying to debug this issue, I’d prefer to have the app live update while I make changes. So I followed the steps here: Capacitor - build cross platform apps with the web, and instead of
ionic cap run ios -l --external, run
npx cap run ios -l --external.
This initially gave some build errors in the console with regards to stale files. But opening Xcode and automatically resolving some warnings after pressing the Play / Start button, fixed these. And 'lo behold! The Framework7 default install loads in the emulator! This narrows down the issue even further, to the production build.
Can now confirm that following the above steps with my own app loads the app in the simulator. Will now be switching back to the F7 fresh install and continue debugging with that one. Something tells me that if I resolve it there, I’ll have it fixed in my own project.
After building and running the F7 fresh install, it didn’t load using
npx cap run ios. However, launching it from Xcode does work. I then switched back to my own project and the production build loaded inside the emulator. With the upside that live reload in the emulator now works as well.
So… it’s fixed? Very weird. It seems like installing
npm install -g @ionic/cli native-run made the difference. Well, I’ll take a fix in any form I hope the above steps help someone else to debug their F7 app in the future.
After commenting out that second entry, everything worked as expected