title: React module import/export Parse Error: Line 1: Illegal import declaration (gulp)
body: <p>package.json</p>
  
  <pre><code>  "devDependencies": {
      "babel-plugin-transform-react-jsx": "^6.23.0",
      "babel-preset-es2015": "^6.24.0",
      "babelify": "^7.3.0",
      "browser-sync": "^2.11.1",
      "gulp": "^3.9.1",
      "gulp-babel": "^6.1.2",
      "gulp-plumber": "^1.1.0",
      "react-paginate": "^4.3.1",
      "react-router": "^2.8.1"
      "browser-sync": "^2.11.2",
      "chart.js": "^2.1.6",
      "colors": "^1.1.2",
      "event-stream": "^3.3.2",
      "gulp": "^3.9.1",
      "gulp-browserify": "^0.5.1",
      "gulp-concat": "^2.6.0",
      "gulp-less": "^3.0.5",
      "gulp-less-sourcemap": "^1.4.3",
      "gulp-plumber": "^1.1.0",
      "gulp-react": "^3.1.0",
      "gulp-rename": "^1.2.2",
      "gulp-sourcemaps": "^1.6.0",
      "gulp-uglify": "^1.5.3",
      "gulp-util": "^3.0.7",
      "lodash": "^4.13.1",
      "path": "^0.12.7",
      "react": "^15.1.0",
      "react-dom": "^15.1.0",
      "reactify": "^1.1.1"
    }
  </code></pre>
  
  <p>gulpfile.js</p>
  
  <pre><code>var gulp = require('gulp');
  var less = require('gulp-less');
  var path = require('path');
  var rename = require("gulp-rename");
  var eventStream = require('event-stream');
  var concat = require('gulp-concat');
  var uglify = require('gulp-uglify');
  var sourcemaps = require('gulp-sourcemaps');
  var plumber = require('gulp-plumber');
  var gutil = require('gulp-util');
  var less = require('gulp-less-sourcemap');
  var babel = require('gulp-babel');
  var babelify = require("babelify");
  var browserify = require('gulp-browserify');
  var browserSync = require('browser-sync').create();
  
  
  gulp.task('themeSelector', function() {
  
    return gulp.src( ['./js/theme-selector/**/*.js', '!./js/**/*.min.*'] )
      .pipe(plumber(onError))
      .pipe(babel({
          presets: ['es2015'],
          plugins: ['transform-react-jsx'],
      }))
      .pipe(browserify({
        transform: ['babelify', 'reactify'],
        debug: true
      }))
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('./js/theme-selector/'));
  });
  </code></pre>
  
  <p><strong>Files:</strong><br>
  js/theme-selector/app.js</p>
  
  <pre><code>    import React, { Component } from 'react';
      import { render } from 'react-dom';
      import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router';
      import Loader from './components/loader';
  
      class Main extends Component {...}
  </code></pre>
  
  <p>js/theme-selector/components/loader.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  
  class Loader extends Component {
    render() {
      return (
          &lt;div class="loader-wrap" id="page-settings-loader"&gt;
              I'm a loader
          &lt;/div&gt;
      )
    }
  };
  
  export default Loader;
  </code></pre>
  
  <p>If I move the loader component into app.js, files are compiled without error. If I <code>import React from 'react';</code> instead of <code>import React, { Component } from 'react';</code> I get no error, however I get an unexpected token at the first line of JSX. </p>
  
  <p>Clearly I'm not piping additional components properly through babel/browserify. </p>