I have a long-running project that I have recently updated to F7 v7, Vite and Capacitor, after running F7 v6, webpack and Cordova.
After working through some issues getting Vite and Capacitor right, I’ve now got PWA, Capacitor Electron and Capacitor Android working fine. However, on iOS I just get a blank white screen.
Running iOS Capacitor with the server settings (so that Capacitor loads the app from the local Vite dev server) works fine. So maybe something to do with rollup?
I can see that all sources seem to load correctly, there are no errors reported in the console (other than some about StatusBar.setBackgroundColor). The console shows some of the other JS libraries loading correctly.
If I inspect the DOM, I can see that the F7 root is created, but nothing else seems to happen. It seems like the route to the url “/” is not loading.
Does anyone have any clues as to what might be happening? The exact same code works fine on Android, so I don’t think it’s a problem with rollup or the loading of the scripts… Unless it’s something iOS specific?
Still working through this - it’s really strange…
If I tell capacitor to load from a local http source, and serve exactly the same source files as get copied into the capacitor app from a local httpd server, everything works as expected.
Tell Capacitor to load exactly the same source files from the app however, and none of my app components render.
I would take this to the capacitor community, but I don’t think it’s necessarily capacitor… I think it’s an interaction between that and F7, as everything works up until Framework7 and/or React go to render my app code.
I have created a debuggable bundle to run in the Cap iOS app so I can set breakpoints, and I can see that some of my component code runs, but it doesn’t get as far as rendering my components.
Right - I’m stumped.
I have stepped through the code in the debugger in Safari attached to the web view in the iOS Simulator, and I can see that React creates the root element (the F7 element) and then that’s it! Doesn’t render any of the children elements at all.
Only happens on iOS Capacitor. No errors or warnings in the console. No clues at all.
Does anyone have any ideas?
If you create clean new project with F7 CLI, will it work correctly for you?
Yep - clean fresh project works fine…
I’ve narrowed it down to what I am doing to route based on whether the user is logged in.
A little while ago I asked for help with showing a login screen if the user is not authenticated (see View ignoring loadInitialPage={false}? - #2 by nolimits4web).
This solution has been working fine until I upgraded to F7 v7 and Capacitor (instead of v6 and Cordova). Now, in Capacitor iOS, putting initialPage in the props for the login view breaks things and I get the blank screen. If I remove initialPage, it works - but ONLY in Cordova iOS. Every other platform (PWA, Capacitor Android and Electron) need initialPage to correctly show the login page component.
I think I could get around this by conditionally adding the prop if device.ios === true, but that seems a bit “hacky” and liable to break in future.
As a side note - TypeScript has always moaned about initialPage not being in the props for the component… I just ignored it figuring it was just a missing type in the declaration file…