Как избежать многократного связывания ReactJs с помощью Gulp?

Я пытаюсь использовать ReactJS в качестве рендеринга библиотеки представлений на стороне клиента. Также я импортирую множество компонентов из Material-UI в качестве компонентов. Одна проблема заключается в том, что мне нужно использовать gulp для настройки browserify (для использования модуля в браузере) и babelify (компиляция JSX в Javascript). Но я обнаружил, что если React объединен более одного раза, пользовательский интерфейс будет иметь ошибку в поведении и стиле. Согласно эта статья, я настроил gulpfile.js следующим образом.

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');

var dependencies = [
  'react',
  'react-dom',
  'material-ui',
  'react-tap-event-plugin'
];

var scriptsCount = 0;

gulp.task('scripts', function () {
    bundleApp(false);
});

gulp.task('deploy', function (){
  bundleApp(true);
});

gulp.task('watch', function () {
  gulp.watch(['./app/*.js'], ['scripts']);
});

gulp.task('default', ['scripts','watch']);

function bundleApp(isProduction) {
  scriptsCount++;
  var appBundler = browserify({
      entries: './app/app.js',
      debug: true
    })
  if (!isProduction && scriptsCount === 1){
    browserify({
      require: dependencies,
      debug: true
    })
    .bundle()
    .on('error', gutil.log)
    .pipe(source('vendors.js'))
    .pipe(gulp.dest('./web/js/'));
  }
  if (!isProduction){
    dependencies.forEach(function(dep){
      appBundler.external(dep);
    })
  }
  appBundler
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .on('error',gutil.log)
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('./web/js/'));
}

Если я бегу:

gulp scripts

более одного раза, пользовательский интерфейс будет иметь некоторые проблемы и ошибки в консоли.

Итак, КАК мне изменить gulpfile, чтобы избежать связывания React? Помогите, пожалуйста.