title: Server-side React: Babel doesn't transform JSX on the server neither on the fly not manually. Why?
body: <p>I use LoopbackJS framework for Node.js (the same as Express because it is based on Express). And I cannot set React server side rendering. I followed <a href="https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html">this article</a>, and answers here on Stackoverflow, and other articles, doesn't work.</p>
  
  <p>Babel docs are miserable, no examples, 'try to guess' style. Here is the only piece of info they provide about how to render React on the fly:</p>
  
  <pre><code>$ npm install -g babel-core
  
  require("babel-core/register");
  </code></pre>
  
  <blockquote>
    <p>All subsequent files required by node with the extensions .es6, .es, .jsx and .js will be transformed by Babel. The polyfill specified in polyfill is also automatically required.</p>
  </blockquote>
  
  <p>But it doesn't work.</p>
  
  <p>By the way, other articles suggest to use <code>require("babel/register")</code>. What is the difference? I tried both. Result is the same - <code>SyntaxError: Unexpected token</code>.</p>
  
  <p>Here is my code:</p>
  
  <p>This is <code>client/js/components.js</code>:</p>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react');
  
  
  var Form = React.createClass({
      render: function() {
          return (
              &lt;form action="" method="post" id="login-form"&gt;
                  &lt;div&gt;&lt;input type="text" id="login" placeholder="Login" /&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;input type="text" id="pass" placeholder="Password" /&gt;&lt;/div&gt;
              &lt;button id="sbm-btn"&gt;{login}&lt;/button&gt;
          &lt;/form&gt;
          );
      }
  });
  
  exports.Form = Form;
  </code></pre>
  
  <p>This is <code>server/boot/routes.js</code>:</p>
  
  <pre><code>require("babel-core/register"); // &lt;== I tried to include it here, doesn't work
  var React = require('react');
  var ReactDOM = require('react-dom/server');
  var components = require('../../client/js/components.js');
  
  module.exports = function(app) {
      app.get('/login', function(req, res) {
          var Form = React.createFactory(components.Form); // &lt;== Include component
  
          res.render('login', {
              react: ReactDOM.renderToString(Form({login: "Sign In"})) // &lt;== render component
          });
      });
  };
  </code></pre>
  
  <p>This is <code>server/server.js</code>, an enter point. All is standard except that I set up <code>Dust.js</code> as a template engine:</p>
  
  <pre><code>require('babel-core/register'); // &lt;== I tried to include it here. Doesn't work
  
  var loopback = require('loopback');
  var boot = require('loopback-boot');
  var adaro = require('adaro');  // &lt;== for Dust.js template engine
  var path = require('path');
  var bodyParser = require('body-parser');
  
  var app = module.exports = loopback();
  
  app.start = function() {
      // start the web server
      return app.listen(function() {
          app.emit('started');
          console.log('Web server listening at: %s', app.get('url'));
      });
  };
  
  // Dust.js template engine settings
  app.set('views', path.resolve(__dirname, '../views'));
  app.engine('dust', adaro.dust({}));
  app.set('view engine', 'dust');
  
  
  // Bootstrap the application, configure models, datasources and middleware.
  // Sub-apps like REST API are mounted via boot scripts.
  boot(app, __dirname, function(err) {
      if (err) throw err;
  
      // start the server if `$ node server.js`
      if (require.main === module)
          app.start();
  });
  </code></pre>
  
  <p>And when I try to start a server <code>node server/server.js</code>, I get this long <code>SyntaxError: Unexpected token</code> error throw:</p>
  
  <pre><code>Failed loading boot script: c:\Users\user\sbox\node\myApp\server\boot\routes.js
  SyntaxError: c:/Users/user/sbox/node/myApp/client/js/components.js: Unexpected token (8:12)
     6 |     render: function() {
     7 |         return (
  &gt;  8 |             &lt;form action="" method="post" id="login-form"&gt;
       |             ^
     9 |                 &lt;div&gt;&lt;input type="text" id="login" placeholder="Login" /&gt;&lt;/div&gt;
    10 |                 &lt;div&gt;&lt;input type="text" id="pass" placeholder="Password" /&gt;&lt;/div&gt;
    11 |             &lt;button id="sbm-btn"&gt;{login}&lt;/button&gt;
      at Parser.pp.raise (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)
      at Parser.pp.unexpected (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:91:8)
      at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:510:12)
  
      at Parser.pp.parseExprSubscripts (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:2
  65:19)
      at Parser.pp.parseMaybeUnary (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:245:1
  9)
      at Parser.pp.parseExprOps (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:176:19)
      at Parser.pp.parseMaybeConditional (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js
  :158:19)
      at Parser.pp.parseMaybeAssign (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:121:
  19)
      at Parser.pp.parseParenAndDistinguishExpression (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\
  expression.js:583:26)
      at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:469:19)
  
  c:\Users\user\sbox\node\myApp\node_modules\loopback-boot\lib\executor.js:273
        throw err;
              ^
  SyntaxError: c:/Users/user/sbox/node/myApp/client/js/components.js: Unexpected token (8:12)
     6 |     render: function() {
     7 |         return (
  &gt;  8 |             &lt;form action="" method="post" id="login-form"&gt;
       |             ^
     9 |                 &lt;div&gt;&lt;input type="text" id="login" placeholder="Login" /&gt;&lt;/div&gt;
    10 |                 &lt;div&gt;&lt;input type="text" id="pass" placeholder="Password" /&gt;&lt;/div&gt;
    11 |             &lt;button id="sbm-btn"&gt;{login}&lt;/button&gt;
      at Parser.pp.raise (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)
      at Parser.pp.unexpected (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:91:8)
      at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:510:12)
  
      at Parser.pp.parseExprSubscripts (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:2
  65:19)
      at Parser.pp.parseMaybeUnary (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:245:1
  9)
      at Parser.pp.parseExprOps (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:176:19)
      at Parser.pp.parseMaybeConditional (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js
  :158:19)
      at Parser.pp.parseMaybeAssign (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:121:
  19)
      at Parser.pp.parseParenAndDistinguishExpression (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\
  expression.js:583:26)
      at Parser.pp.parseExprAtom (c:\Users\user\sbox\node\myApp\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:469:19)
  </code></pre>
  
  <p>What do I do wrong? It it Babel's error or somehow LoopbackJS blocks Babel? How to enable React rendering?</p>