I am working on an app that uses ionic capacitor in ios. I recently updated my Xcode to 13. When syncing my ionic app to ios and then running my code in Xcode, it runs. But when opening a map using mapbox, the screen half loads, and then the app bugs out and starts refreshing the page. See the half-loaded screen here:
When I instead run ionic cap run ios -l --external
, creating a live reload server that runs the code in ios, the code runs and the Mapbox map works! I’ve run the app without adding the -l
(indicating live reload) and it does not work.
This is a major problem because I cannot run a live reload server for users when using the app in production. Anyone experienced this or know how to fix the problem? I’m not sure if this is because I’ve updated my Xcode or not.
2
Answers
Update: It appears that
this.map.on('load'()=>{})
does not work when running an ionic capacitor app using mapbox gl js on ios. I just commented that code out and the app worked.Had the same issue (with Ionic React), solved it this way (leaving notes if someone else stumbles onto it):
This turned out to be a super-frickly issue with how mapbox-gl
works internally. A certain module can’t be transpiled properly
if other browsers are targeted.
Followed these docs on transpiling v2:
https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling
Previous bug reports happened in multiple ways: