Blank screen with a Capacitor iOS build using a fresh Framework7 install

Questions
1

Hi there,

I’ve just created a new folder, installed a fresh F7 instance using framework7 create --ui. I opted for the Capacitor build + Vue and then ran:

npm i
npm install @capacitor/ios
npx cap add ios
npm run build-capacitor-ios
npx cap run ios

The app builds on an iPhone 12 mini simulator. And then I’m greeted with a blank screen. Running npm run dev does show the kitchen sink app as expected in the browser.

Since it’s a fresh build using default settings, I have no idea where to start debugging this.

Any ideas?

2

ETA: I did manage to build and run a fresh CapacitorJS app in a simulator. So I’ve ruled out any M1 Macbook incompatibilities. Further more, when adding static text to the index.html, this shows in the emulator. Which points to JS issues. The blank screen, is a blank HTML page.

I will continue to share my findings here. Hopefully it may help someone in the future. If you have any more ideas as to what can be wrong, please let me know in a reply!

3

Do you absolutely need to use Capacitor? Could you switch to Cordova instead?

4

As a last resort, I guess I could try that. But I’d prefer to get something working that should be working :wink: Further more, I did some research into CapacitorJS vs Cordova and came away impressed with Capacitor and the improvements it offers over Cordova.

5

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] TypeError: 'application/octet-stream' is not a valid JavaScript MIME type.
	promiseReactionJob
[Error] Did not parse stylesheet at 'capacitor://localhost/assets/index.651fdced.css' because non CSS MIME types are not allowed in strict mode.

Update 1:
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.

Update 2:
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.

Update 3:
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 :wink: I hope the above steps help someone else to debug their F7 app in the future.

Update 4:
After I got Javascript running, and the app loaded, I got my login screen, but another blank screen after that. So in the end there were 2 blank screen issues. The last one was fixed by comparing a fresh F7 install with my own app. Turns out that if you use one page component for 2 routes, the iOS browser only loads it for the second instance. Leaving the first page blank. Here was that code:

        {
          path: '/',
          component: ThingPage,
        },
        {
          path: '/thing',
          component: ThingPage,
        },

After commenting out that second entry, everything worked as expected :tada:

1 Like
6

weird conclusion.
it must be something else

there is nothing wrong with this code:

let value = 'value';
let array = [
  { comp: value },
  { comp: value },
];
7

That’s a generic object. No idea what that has to do with my problem?

Like I mentioned, it did not load in the Simulator, while it did load in the browser. How the iOS simulator handled that array with Vue pages internally I do not know. It could very well be that identical components are only processed once under the hood. No idea. But trial and error got me to the solution, and that last blank screen was fixed by removing all duplicate route entries with similar component properties.

It’s not something else, because now it’s working :wink: