My team and I are building out an Ionic React app and have code building and deploying to our production environment for both iOS and Android native mobile platforms.
We have recently decided to upgrade our app to Ionic 6. However, as a part of this upgrades, the Ion Modals on both our iOS and Android builds are crashing when isOpen is being set from true to false. There are no problems when instantiating and opening the modals - only when dismissing the modals. The error that is thrown is shown below:
E/Capacitor/Console: File: http://localhost/static/js/3.339a7f7d.chunk.js - Line 2 - Msg: TypeError: Cannot read property ‘append’ of null
E/Capacitor: JavaScript Error: {“type”:“js.error”,“error”:{“message”:“Uncaught TypeError: Cannot read property ‘append’ of null”,“url”:“http://localhost/static/js/3.339a7f7d.chunk.js",“line”:2,“col”:994537,“errorObject”:"{}”}}
Unfortunately, this is completely bricking our app (this doesn’t crash the app - just causes a perpetual white screen). Based on my initial investigate, I think this has to do with the movement of Ionic to leverage the shadow DOM for Ion Modal components. This is the only substantial change that I’ve seen in the Ionic 6 changelogs for Ion Modal components that could be related to this error.
Has anyone seen this error before? If so, have you managed to find a workaround? Are there safer alternative ways to open and close our modal aside from setting the isOpen property on the component that won’t cause the error to be thrown?
1 post - 1 participant