react-frame-component
react-frame-component copied to clipboard
ryanseddon
`createPortal` cannot have a nullable target
I've run into rare situations where createPortal used on two lines is using null target values. https://github.com/ryanseddon/react-frame-component/blob/master/src/Frame.jsx#L118
This, in turn, creates a "Target container is not a DOM element." exception.
This was reported in the past here: https://github.com/ryanseddon/react-frame-component/issues/131
Regardless of the related bugs from my sentry report, at the bare minimum, the argument should be checked if it's actually null or not. This is more easily noticeable in TypeScript.
I'm not sure that is the case, this error only happens when there is a timing issue with srcdoc rendering the intitial content and the onload event firing before it's ready.
I believe this issue would be fixed once we figure out how to solve #206
This should be reproducible occassionally when we try to inject a lot of styles which might be returned in a function into the initialContent head tag:
Example:
initialContent={`<html class="${iframeContentClass}"><head>"${getStyles()}"</head><body id="mountChild" class="neetochat-root__body"></body></html>`}
This issue affects our application on every refresh. Have to resolve by patching it
diff --git a/node_modules/react-frame-component/lib/Frame.js b/node_modules/react-frame-component/lib/Frame.js
index ec341a3..6655bf2 100644
--- a/node_modules/react-frame-component/lib/Frame.js
+++ b/node_modules/react-frame-component/lib/Frame.js
@@ -151,6 +151,11 @@ var Frame = exports.Frame = function (_Component) {
var mountTarget = this.getMountTarget();
+ if (!mountTarget) {
+ return null;
+ }
+
return [_reactDom2.default.createPortal(this.props.head, this.getDoc().head), _reactDom2.default.createPortal(contents, mountTarget)];
}
}, {
@deathemperor would appreciate a PR to help fix this
Hi, here's the simple PR https://github.com/ryanseddon/react-frame-component/pull/255