react-frame-component icon indicating copy to clipboard operation
react-frame-component copied to clipboard

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

Open Zetxus opened this issue 1 year ago • 0 comments

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 https://github.com/ryanseddon/react-frame-component/blob/1b44f0a98a7b02710f7de6c6b0ed81cc524fc545/src/Frame.jsx#L74

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.

Zetxus avatar Dec 21 '23 16:12 Zetxus