title: Embedding Reactjs in Remote Site iFrame
body: <blockquote>
  <p><strong>Updated for Bounty</strong></p>
  <p>I am currently using src=&quot;url&quot; in my iframe to load the ReactApp which
  is not optimal for me as that will allow user to right-click and &quot;Open
  In New Window&quot;.</p>
  <p>The optimal solution which I'm looking for is to write my bundle.js
  into the iframe together with a  or simliar solution.
  The src will remain as blank so user cannot conveniently right click
  to open in new window/tab.</p>
  </blockquote>
  <p>I am exploring how to use React to make an embeddable widget so I got the following so far from googling. However, my  doesn't render, and returns the following message.</p>
  <p><strong>Error Message</strong>
  [Error] Invariant Violation: Target container is not a DOM element.</p>
  <p>I use create-react-app for my embeddable app and I have only 2 simple files.</p>
  <p><strong>index.js</strong></p>
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import App from './App';
  
  ReactDom.render(
          &lt;App /&gt;, document.getElementById('root')
  )
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  
  class App extends Component {
      render() {
          return (
              &lt;div&gt;This is an embedable widget&lt;/div&gt;
              )
      }
  }
  
  export default App;
  </code></pre>
  <p>I created a test.js which will be called in the remote iframe with the simple codes below to generate the html, to include the js bundle, as well as the div with id.</p>
  <p><strong>This is the test.js</strong></p>
  <pre><code>//Creates Div
  var d = document.createElement(&quot;div&quot;);
  document.body.appendChild(d);
  
  //Creates iFrame
  var n = document.createElement(&quot;iframe&quot;);
  n.id = &quot;microcom-frame&quot;;
  n.style.width = &quot;100%&quot;;
  n.style.height = &quot;100%&quot;;
  n.style.background = &quot;transparent&quot;;
  n.style.position = &quot;relative&quot;;
  n.style.margin = 0;
  n.style.border = &quot;none&quot;;
  n.style.overflow =&quot;hidden&quot;;
  n.style.display = &quot;block&quot;;
  
  //Append iFrame inside Div
  d.appendChild(n);
  
  //Write content to iFrame
  n.contentWindow.document.open(&quot;text/html&quot;, &quot;replace&quot;), 
  n.contentWindow.document.write(&quot;\n    &lt;!doctype html&gt;\n    &lt;head&gt;&lt;script src='http://localhost:3001/static/js/bundle.js' type='text/javascript'&gt;&lt;/script&gt;&lt;/head&gt;\n    &lt;body&gt;&lt;div id='root'&gt;&lt;/div&gt;&lt;/body&gt;\n    &lt;/html&gt;&quot;), 
  n.contentWindow.document.close();
  </code></pre>
  <p>Now on the remote site I just have the following script in the header to call my test.js above.</p>
  <pre><code>    &lt;script&gt;
        (function() {
    var d = document,
        h = d.getElementsByTagName('head')[0],
        s = d.createElement('script');
  
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://localhost:3001/test.js';
    h.appendChild(s);
    
  } )();
  &lt;/script&gt;
  </code></pre>
  <p>Now is this....</p>
  <ul>
  <li>test.js loaded successfully</li>
  <li>div created successfully</li>
  <li>iframe created successfully</li>
  <li>i can see bundle.js added in the header of iframe together with
  the div with id root</li>
  </ul>
  <p>However,  is not displaying.</p>
  <p><strong>Appreciate someone can bring me to the next step. I am using create-react-app to create my react files (that's the only way i learnt.)</strong></p>