title: How to transpile node cli app using babel
body: <p>I am writing mt first cli app with node and I am facing some issues using babel to transpile my code.
  Basically, the app should start an express server which does ssr for react (similar to what next does).
  Somewhere in the process I use jsx syntax to render react component, so I need to transpile my code with babel.
  I am familiar on how to do this with babel cli or with webpack,
  howevere, I`m still facing issues implementing it for cli app.</p>
  
  <p>In my <code>package.json</code> file I have:</p>
  
  <pre><code>  "bin": {
      "ssr": "./cli/ssr.js"
    },
  </code></pre>
  
  <p>and my ssr.js file:</p>
  
  <pre><code>    #!/usr/bin/env node
  
  const server  = require('../server');
  const routes = require('../../routes.js');
  const createStore = require('redux').createStore;
  
  const port = process.env.PORT || 3000;
  const args = process.argv;
  
  const defReducer = function(state={}, action){
      return state;
  }
  const configureStore = createStore(defReducer);
  
  const instance = server(routes, configureStore, {}, {});
  
  instance.listen(port, ()=&gt;{
      console.log(`ssr server runs on localhost://${port}`);
  });
  </code></pre>
  
  <p>and my server.js file is just a regular express server:</p>
  
  <pre><code>const express = require('express');
  const cors = require('cors');
  const renderer = require('./renderer');
  
  
  module.exports = (Routes, createStore=()=&gt;null, renderOpts={}, routerContext={})=&gt;{
      const app = express();
      app.use(express.static('public'));
      app.use(cors());
      const port = process.env.PORT || 3000;
  
      app.get('*.js', (req, res, next) =&gt; {
          req.url = req.url + '.gz';
          res.set('Content-Encoding', 'gzip');
          next();
      });
  
      app.all('*', (req, res) =&gt; {
  
          const store = createStore();
          const promises = matchRoutes(Routes, req.path).map(( { route } ) =&gt; {
            if (typeof route.path === 'undefined') { return null; }
            let ctx = {store, module:route.module, req, res}
            return route.loadData ? route.loadData(ctx) : null;
          });
  
          Promise.all(promises).then(() =&gt; {
            const content = renderer(Routes, req, store, renderOpts, routerContext);
  
            if (context.url) {
              return res.redirect(301, context.url);
            }
  
            if (context.notFound) {
              res.status(404);
            }
  
            res.send(content);
          });
        });
  
        return app;
  }
  </code></pre>
  
  <p>inside server.js file I call <code>renderer</code> which does:</p>
  
  <pre><code>        const content = renderToString(
          &lt;Provider store={store}&gt;
              &lt;StaticRouter location={req.url} context={routerContext} basename= {opts.baseName || ''}&gt;
                  &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
              &lt;/StaticRouter&gt;
          &lt;/Provider&gt;
      );
  </code></pre>
  
  <p>and this is where I get my syntax errors...
  I also tried to precompile my server.js file using webpack and babel
  and than link the bin command to the bundle.js output but it didn`t work
  I get this error popping on the screen:</p>
  
  <p><a href="https://i.stack.imgur.com/M6fwl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6fwl.png" alt="enter image description here"></a></p>
  
  <p>What is the correct way of using babel with cli app?</p>