ryanseddon / react-frame-component

Render your React app to an iFrame
http://ryanseddon.github.io/react-frame-component/
MIT License
1.75k stars 156 forks source link

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

Open Zetxus opened 11 months ago

Zetxus commented 11 months ago
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.

LiChoi commented 2 days ago

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.