"Cannot read properties of null" when trying to get the mount target (doc.body is null)

[Zetxus]

Uncaught TypeError: Cannot read properties of null (reading 'children')
    at Frame2.getMountTarget (react-frame-component.js?t=1703167413411&v=b806ac1f:258:27)
    at Frame2.renderFrameContents (react-frame-component.js?t=1703167413411&v=b806ac1f:291:34)
    at Frame2.render (react-frame-component.js?t=1703167413411&v=b806ac1f:311:45)
    at finishClassComponent (chunk-662WTFJQ.js?v=b806ac1f:14694:39)
    at updateClassComponent (chunk-662WTFJQ.js?v=b806ac1f:14659:32)
    at beginWork (chunk-662WTFJQ.js?v=b806ac1f:15918:22)
    at HTMLUnknownElement.callCallback2 (chunk-662WTFJQ.js?v=b806ac1f:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-662WTFJQ.js?v=b806ac1f:3699:24)
    at invokeGuardedCallback (chunk-662WTFJQ.js?v=b806ac1f:3733:39)
    at beginWork$1 (chunk-662WTFJQ.js?v=b806ac1f:19761:15)

I just encountered this, here's a small repo with reproduction:

https://github.com/Zetxus/react-frame-component-test

In our project this happens when we change the initialCotnext rapidly. In our case we're using the frame to render raw HTML instead of actual react components.

I suspect some kind of a race condition, however I am not familiar enough with the internals of this project, so maybe someone could have an idea why this is happening? Here's the exact line in question

react-frame-component/src/Frame.jsx

Line 74 in 1b44f0a

return doc.body.children[0];

Weirdly enough in the reproduction repo the error happens really soon when you touch the hue control but almost not at all when you rapidly change the color itself. No idea if this is just a coincidence. We're using a similar setup but with a different color picker. The result is the same.

A workaround that we currently use is to set the key property of the Frame itself to the html (basically the same as what we provide to the initialContent), which in turn forces a full re-render and somehow doesn't throw the exception. You can try this out by setting

key={color}

in the test repo.

[LiChoi]

Getting the same issue.

Specifically, when initialContent contains dynamic elements within script tags. This will cause error "Cannot read properties of null (reading 'children')". Dynamic elements in non-script tags, such as divs, are fine.