title: Using Babelify to compile React results in React Router being undefined
body: <p>I'm using Gulp for my build system, with Browserify for compiling my JS. I had been using Reactify for JSX compilation, but thought I'd switch to Babelify to get some additional ES2015 features. No errors are thrown when compiling, but when I load my site in the browser I get the following error in my JS console:</p>
  
  <p><code>Uncaught ReferenceError: Router is not defined</code></p>
  
  <p>The line the error is referring to is:</p>
  
  <p><code>var React = require('react');</code></p>
  
  <p>in the main component file that is being loaded on the page. </p>
  
  <p>The places where I am importing React Router are in my App.jsx file (which is the entrypoint for the application) and my routes.jsx file, where I define the routes:</p>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>var React  = require('react'),
      Router = require('react-router'),
      routes = require('./routes.jsx');
  
  Router.run(routes, function(Handler, state) {
  
      var routeClasses = '';
      for (var i = 1; i &lt; state.routes.length; i++) {
          routeClasses += state.routes[i].name + ' ';
      }
  
    React.render(&lt;Handler classes={routeClasses.trim()} /&gt;, document.getElementById('root'));
  });
  </code></pre>
  
  <p><strong>routes.jsx</strong></p>
  
  <pre><code>var React        = require('react');
      Router       = require('react-router'),
      Route        = Router.Route,
      DefaultRoute = Router.DefaultRoute,
      App          = require('./_layout/App.jsx'),
      Editor       = require('./editor/Editor.jsx');
  
  module.exports = (
    &lt;Route name="app" path="/" handler={App}&gt;
      &lt;DefaultRoute name="editor" handler={Editor} /&gt;
    &lt;/Route&gt;
  );
  </code></pre>
  
  <p>Everything was working fine when using Reactify rather than Babelify. I'm using Gulp for my build process:</p>
  
  <pre><code>gulp.task('js', function() {
    var browserify = require('browserify'),
        watchify   = require('watchify'),
        minifyify  = require('minifyify'),
        babelify   = require('babelify');
  
    function bundle() {
      b.bundle()
        .on('error', function(error){
          gutil.log(error);
        })
        .pipe(source('app.js'))
        .pipe(gulp.dest(paths.client.js.build))
        .pipe(gulpif(!isStartup, browserSync.stream()));
  
      isStartup = false;
    }
  
    var map = isProd ? false : 'app.map.json';
  
    var b = browserify({
      cache: {},
      packageCache: {},
      entries: paths.client.js.dev,
      debug: true,
      plugin: [watchify]
    })
    .transform(babelify, {presets: ['es2015', 'react']})
  
    .plugin('minifyify', {
      map: map,
      output: paths.client.js.build + 'app.map.json',
    });
  
    b.on('update', function(){
      bundle();
    });
  
    b.on('log', gutil.log); // output build logs to terminal
    bundle();
  });
  </code></pre>
  
  <p>The working version, using Reactify, simply omits the <code>.transform(babelify...)</code> line and adds <code>transform: reactify</code> to the <code>browserify()</code> initialization code, i.e.</p>
  
  <pre><code>  var b = browserify({
      cache: {},
      packageCache: {},
      entries: paths.client.js.dev,
      debug: true,
      transform: reactify,
      plugin: [watchify]
    });
  </code></pre>