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?