title: React: server side rendering, Invariant Violation: Invalid tag: <!doctype html>
body: <p>I am trying to render the whole page in <code>React</code> only then sending it to the browser. I am getting the following error:</p>
  
  <blockquote>
    <p>Invariant Violation: Invalid tag: <code>&lt;!doctype html&gt;</code></p>
  </blockquote>
  
  <p>The line that is producing this error is <code>ReactDOMServer.renderToString(el);</code>:</p>
  
  <pre><code>fs.readFile('./public/index.html',"utf8", function (err, data){
      /*res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
      res.write(data);
      res.end();*/
      var el = React.createElement(data);
      console.log("React element was successfully created!");
  -----&gt; var html = ReactDOMServer.renderToString(el);
      res.send(html);
    });
  </code></pre>
  
  <p>The <code>html</code> file looks the following way:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      ...
      &lt;title&gt;React App&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="bundle.js" charset="utf-8"&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How to fix the error? Any suggestions would be greatly appreciated.</p>
  
  <blockquote>
    <p>Update</p>
  </blockquote>
  
  <p>I tried to do the following:</p>
  
  <pre><code>var mainData = prepareDataForScatterChart(result);
    const html = ReactDOMServer.renderToString(`&lt;App 
    mainData=${mainData}/&gt;`);
    fs.readFile('./public/index.html',"utf8", function (err, data){
    const document = data.replace(/&lt;div id="app"&gt;&lt;\/div&gt;/, `&lt;div 
    id="app"&gt;${html}&lt;/div&gt;`);
    res.send(document);
  </code></pre>
  
  <p>The error is gone, but after I load the page there are errors that mean that the data was not passed to the <code>App</code>.</p>
  
  <blockquote>
    <p>Update</p>
  </blockquote>
  
  <p>I got it working on the server by adding <code>babel-node</code>, but browser still somehow is not getting the data. So, in the <code>App</code> I am printing out the <code>mainData</code> and it is there in the <code>node</code> console, but in browser it is shown as <code>undefined</code>. Here is the code that I am using now:</p>
  
  <pre><code>const html = ReactDOMServer.renderToString(&lt;App mainData={mainData}/&gt;);
  </code></pre>