title: React Unable To Find img Element
body: <p>When rendering a react component from the server, I keep seeing the 'Unable to find element' error after the component renders on the client.</p>
  
  <pre><code>Uncaught Error: Invariant Violation: 
  findComponentRoot(..., .1ea0t0y2j9c.$img): Unable to find element. 
  </code></pre>
  
  <p>If I check the page source, I can see the id of the component that's given in the error.</p>
  
  <p>Here's my setup; I've got an express server with a controller rendering the component to a string and sending it to the browser. Once the browser renders the component a second time, I receive the error. I'm only seeing this error for images. I've tried other DOM components, but those seem to work fine. I'm sure there's something changing on the second rendering on the client, but I've compared the server output to the client output and I can't find any differences.</p>
  
  <p>Why would the <code>React.DOM.img</code> component get mutated to cause this error? Is there some difference between the <code>React.renderToString</code> and <code>React.render</code> that's causing the difference in the rendering of the image tag?</p>
  
  <p>Here's the server code <strong>app.js</strong></p>
  
  <pre><code>    'use strict';
      var express = require('express');
      var React = require('react');
      var path = require('path');
      var main = React.createElement(require('./main'), {key:'main'});
  
  
      var app = express();
      app.use('/js', express.static(path.join(__dirname, '/js/')));
      app.get('/', function(req, res){
        var str = React.renderToString(main);
        res.set('Content-Type', 'text/html');
        res.send(str);
        res.end();
      });
  
      var server = require('http').createServer(app);
      server.listen(9999, function () {
        console.log('Express server listening');
      });
  </code></pre>
  
  <p>Here's the component code. <strong>main.js</strong></p>
  
  <p>I'm using webpack to package up the main.js script.</p>
  
  <pre><code>'use strict';
  var React = require('react');
  
  var Main = React.createClass({displayName: 'Main',
      render: function(){
          return React.createElement('div',null,
              React.createElement('script',{src: "/js/main.js"}),
              React.createElement('img',{src: "https://www.google.com/images/nav_logo195.png"}));
      }
  });
  
  if (typeof window !== "undefined") {
    React.render(React.createElement(Main, {key:'main'}), document.body);
  } else {
    module.exports = Main;
  }
  </code></pre>
  
  <p>Edit: updated to reflect @ssorallen's suggestions</p>