search

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

`createPortal` cannot have a nullable target #204

Closed mattlo closed 6 months ago

mattlo commented 2 years ago

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.

ryanseddon commented 2 years ago

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

mohitharshan123 commented 1 year ago

@ryanseddon This issue is still happening.

Ref :

Screenshot 2022-12-22 at 2 03 28 PM Screenshot 2022-12-22 at 2 03 43 PM
mohitharshan123 commented 1 year ago

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>`}
deathemperor commented 7 months ago

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)];
     }
   }, {
ryanseddon commented 7 months ago

What version are you using @deathemperor?

deathemperor commented 7 months ago

@ryanseddon I'm using 5.2.6

ryanseddon commented 7 months ago

@deathemperor would appreciate a PR to help fix this

deathemperor commented 7 months ago

@deathemperor would appreciate a PR to help fix this

Hi, here's the simple PR https://github.com/ryanseddon/react-frame-component/pull/255