title: How to use React.js to render server-side template on Sails.js?
body: <p>I am trying to build an isomorphing app with Sails.js and React. Client-side part is easy. But I run into problems with server-side rendering.</p>
  
  <p>When I try to server-render an *.jsx file with React, I got this:</p>
  
  <pre><code>renderToString(): You must pass a valid ReactElement
  </code></pre>
  
  <p>I am using sailsjs, react and sails-hook-babel (for ES6 syntax).</p>
  
  <p>./assets/components/Auth.jsx:</p>
  
  <pre><code>import React from 'react';
  
  export class Auth extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div className='auth'&gt;
          Very simple element without any logic just for test server-rendering.
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>./api/controllers/AuthController.js:</p>
  
  <pre><code>var Auth = require('./../../assets/components/Auth.jsx');
  import React from 'react';
  
  module.exports = {
      render: function (req, res) {
      //var markup = React.renderToString(
      //  Auth
      //); // This throws an error
  
      console.log(Auth); // {__esModule: true, Auth: [Function: Auth]}
  
      //res.view("layout", {app: markup});
    }
  };
  </code></pre>
  
  <p>I have tried both ES5/ES6 syntax everywhere. Error occurs everytime. At clientside this Auth.jsx works fine (I am using webpack with babel-loader).</p>