Web: Dom element rendered by compose then moved by external lib outside compose hierarchy make compose crash

[ylemoigne]

It's a very edge usecase I think, I post it for info/reference but understand that it's priority will be somewhere between unsupported and maybe in version 12...

I use compose with UIKit ( https://github.com/uikit/uikit ). When using UIKit modal feature ( https://getuikit.com/docs/modal ), the modal display correctly and close correctly. But at next highter hierarchy recomposition it crash with an NPE.

name: "NullPointerException"
​
stack: "captureStack@webpack-internal:///./kotlin/YafullStack-NoteApp-app-frontend.js:19115:25
NullPointerException_init_$Create$@webpack-internal:///./kotlin/YafullStack-NoteApp-app-frontend.js:21261:17
THROW_NPE@webpack-internal:///./kotlin/YafullStack-NoteApp-app-frontend.js:19201:11
ensureNotNull@webpack-internal:///./kotlin/YafullStack-NoteApp-app-frontend.js:19194:7
DomNodeWrapper.prototype.remove_rvwcgf_k$@webpack-internal:///./kotlin/YafullStack-NoteApp-app-frontend.js:73866:25
DomApplier.prototype.remove_rvwcgf_k$@webpack-internal:///./kotlin/YafullStack-NoteApp-app-frontend.js:73911:31

What happen, if that the hierarchy at first rendering is something like

Body
  - Compose RootEl
    - AComponent
      - Modal Toggle Something
      - ModalContent

When the modal is first displayed, UIKit impl move the modal under the body :

Body
  - Compose RootEl
    - AComponent
      - Modal Toggle Something
 - ModalContent

When the modal is "closed" (uikit just hide it), it stay under the body element.

Then a rendering happen, and the "forced" non null here https://github.com/JetBrains/compose-jb/blob/d2d4971f282ce02c6647f852b197651424307a27/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/DomApplier.kt#L74 make the crash.

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.