title: Rendering multiple DOM elements from different HTML pages in the same app.js
body: <p>I am a complete newbie with ReactJs or UI coding, in general. I have a single entry point in my ReactJs app - app.js</p>
  
  <pre><code>var React = require("react");
  var ReactDOM = require("react-dom");
  import Main from "./components/Main";
  import Bucket from "./components/Bucket";
  import Relay from "react-relay";
  
  ReactDOM.render(&lt;Main /&gt;,document.getElementById('react'));
  ReactDOM.render(&lt;Bucket /&gt;,document.getElementById('react-bucket'));
  
  console.log(Relay.QL`query Test {ServerGroups {_id}}`);
  </code></pre>
  
  <p>I am trying to render the buckets.html page here : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;RGR&lt;/title&gt;
  &lt;script src="react-0.14.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="react-dom-0.14.3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="react-bucket"&gt;&lt;/div&gt;
  &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I go to the index.html page, everything renders fine. But when I go to the buckets.html page, I get a </p>
  
  <p><strong>Uncaught Error: _registerComponent(...): Target container is not a DOM element</strong> error</p>
  
  <p>When i try to render just one element in app.js (comment out either the Main component render or the Bucket component render) , again, both components render fine. So there is no problem with the components themselves. </p>
  
  <p>There is obviously a problem getting app.js read from both buckets.html and index.html. How can I access buckets.html and index.html in such a situation? Is it even possible?</p>
  
  <p>Thanks!!</p>