title: "Invariant Violation" Using React Server renderToString on Server-Side
body: <p>I'm trying to set up an isomorphic server-side rendering React app using Webpack, but am getting this error when I try turning my React code into a string using renderToString: </p>
  
  <pre><code>Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
  Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
  </code></pre>
  
  <p>I stop getting this error when I comment out the line with the renderToString function (of course, the app still doesn't work - I just no longer get an error message).</p>
  
  <p>I've tried passing renderToString <code>&lt;RootApp /&gt;</code> and <code>React.createElement(RoutingContext</code> instead of making a factory, and neither of those has worked. Using <code>React.createElement</code> resulted in the same error, and using <code>&lt;RootApp /&gt;</code> threw an <code>unexpected token &lt; error</code>.</p>
  
  <p>And ideas on what could be going on?</p>
  
  <p>My app looks like: </p>
  
  <p>app.js</p>
  
  <pre><code>"use strict"
  
  require("babel-register");
  const Express = require('express');
  const BodyParser = require('body-parser');
  const Path = require('path');
  const Fs = require('fs');
  const Url = require('url');
  const ReactRouter = require('react-router');
  const React = require('react');
  const ReactDOMServer = require('react-dom/server');
  
  const app = Express();
  app.set('view engine', 'ejs');
  
  app.get('*', (req, res) =&gt; {
    let RootApp = require('./components/app.jsx');
    let rootAppFactory = React.createFactory(RootApp);
    let reactHtml = ReactDOMServer.renderToString(rootAppFactory({}));
    res.render('index', {reactOutput: reactHtml});
  })
  
  if (process.env.NODE_ENV !== 'test') {
    let port = process.env.port || 4000;
    app.listen(port);
    console.log('Listening on port', port);
  } else {
    module.exports = app;
  }
  </code></pre>
  
  <p>app.jsx</p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  
  class App extends Component {
  
    render() {
      return (
        &lt;div&gt;
          {this.props.children}
        &lt;/div&gt;
      )
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p>index.ejs</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Vjeverica&lt;/title&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="root"&gt;
        &lt;%- reactOutput %&gt;
      &lt;/div&gt;
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>