title: Unhandled rejection Error in plugin "webpack-stream"
body: <p>In going through and updating all the npm packages in a React application, I've encountered an error when performing a <code>gulp build</code> command from the terminal.</p>
  
  <p><code>Unhandled rejection Error in plugin "webpack-stream"
  Message: Module build failed
  Error: Plugin/Preset files are not allowed to export objects, only functions.</code></p>
  
  <p>The files where it seems to be encountering the problem are in the third-party npm_modules babel-loader and babel-preset-react. I've verified that all these "dependencies" are upgraded to the most current general release, and even tried the @latest version, but with no change in behavior - I'm still unable to produce a successful gulp build of my project.</p>
  
  <p>package.json file:
  <code>
      {
        "name": "",
        "version": "0.1.0",
        "description": "",
        "main": "apps/poc/index.html",
        "private": true,
        "dependencies": {
          "array.prototype.find": "^2.0.3",
          "axios": "^0.18.0",
          "base64-js": "^1.2.1",
          "bootstrap": "^4.1.3",
          "bootstrap-sass": "^3.3.7",
          "chance": "^1.0.16",
          "classnames": "^2.2.6",
          "es6-promise": "^4.2.5",
          "font-awesome": "^4.7.0",
          "history": "^4.6.3",
          "immutability-helper": "^2.7.1",
          "moment": "^2.22.2",
          "moment-range": "^4.0.1",
          "moment-timezone": "^0.5.21",
          "object-assign": "^4.1.1",
          "object-entries": "^1.0.0",
          "object-keys": "^1.0.12",
          "object.entries": "^1.0.4",
          "object.values": "^1.0.4",
          "prop-types": "^15.6.2",
          "query-string": "^6.1.0",
          "react": "^16.5.0",
          "react-bootstrap": "^0.32.4",
          "react-bootstrap-date-picker": "^5.1.0",
          "react-datepicker": "^1.6.0",
          "react-datetime": "^2.15.0",
          "react-dom": "^16.5.0",
          "react-fontawesome": "^1.6.1",
          "react-hot-loader": "^4.3.6",
          "react-portal": "^4.1.5",
          "react-redux": "^5.0.7",
          "react-redux-toastr": "^7.4.0",
          "react-router": "^4.3.1",
          "react-router-dom": "^4.3.1",
          "react-router-redux": "^5.0.0-alpha.6",
          "react-timeago": "^4.1.9",
          "react-toggle": "^4.0.2",
          "react-transition-group": "^2.4.0",
          "redux": "^4.0.0",
          "redux-devtools": "^3.3.2",
          "redux-devtools-dock-monitor": "^1.1.1",
          "redux-devtools-log-monitor": "^1.2.0",
          "redux-idle-monitor": "^0.10.2",
          "redux-logger": "^3.0.6",
          "redux-thunk": "^2.3.0",
          "reselect": "^3.0.1",
          "should": "^13.2.3",
          "signature_pad": "^2.3.2",
          "simple-react-bootstrap-button-dropdown": "^0.2.3",
          "string.prototype.startswith": "^0.2.0"
        },
        "devDependencies": {
          "@babel/core": "^7.0.1",
          "@babel/preset-env": "^7.0.0",
          "@babel/preset-react": "^7.0.0",
          "autoprefixer": "^9.1.5",
          "babel-eslint": "^9.0.0",
          "babel-loader": "^8.0.2",
          "babel-plugin-syntax-class-properties": "^6.13.0",
          "babel-plugin-syntax-object-rest-spread": "^6.13.0",
          "babel-plugin-transform-class-properties": "^6.23.0",
          "babel-plugin-transform-es2015-destructuring": "^6.23.0",
          "babel-plugin-transform-object-assign": "^6.22.0",
          "babel-plugin-transform-object-rest-spread": "^6.23.0",
          "babel-plugin-transform-react-constant-elements": "^6.23.0",
          "babel-plugin-transform-react-inline-elements": "^6.22.0",
          "babel-plugin-transform-runtime": "^6.23.0",
          "babel-polyfill": "^6.23.0",
          "babel-preset-env": "^1.7.0",
          "babel-preset-react": "^6.23.0",
          "babel-runtime": "^6.23.0",
          "chokidar": "^2.0.4",
          "css-loader": "^1.0.0",
          "dateformat": "^3.0.3",
          "del": "^3.0.0",
          "enzyme": "^3.6.0",
          "eslint": "^5.5.0",
          "eslint-loader": "^2.1.0",
          "eslint-plugin-react": "^7.11.1",
          "express": "^4.14.1",
          "extract-text-webpack-plugin": "^3.0.2",
          "faker": "^4.1.0",
          "file-loader": "^2.0.0",
          "glob": "^7.1.3",
          "graceful-fs": "^4.1.11",
          "gulp": "github:gulpjs/gulp#4.0",
          "gulp-autoprefixer": "^6.0.0",
          "gulp-babel": "^8.0.0",
          "gulp-changed": "^3.2.0",
          "gulp-concat": "^2.6.1",
          "gulp-cssmin": "^0.2.0",
          "gulp-if": "^2.0.2",
          "gulp-less": "^4.0.1",
          "gulp-load-plugins": "^1.5.0",
          "gulp-mocha": "^6.0.0",
          "gulp-notify": "^3.0.0",
          "gulp-plumber": "^1.1.0",
          "gulp-postcss": "^8.0.0",
          "gulp-print": "^5.0.0",
          "gulp-rename": "^1.4.0",
          "gulp-sass": "^4.0.1",
          "gulp-sourcemaps": "^2.4.1",
          "gulp-task-listing": "^1.1.0",
          "gulp-uglify": "^3.0.1",
          "gulp-util": "^3.0.8",
          "gulp-watch": "^5.0.1",
          "gulp-wrapper": "^1.0.0",
          "imports-loader": "^0.8.0",
          "jquery": "^3.3.1",
          "json-loader": "^0.5.4",
          "json-schema-faker": "^0.4.0",
          "livereload": "^0.7.0",
          "merge-stream": "^1.0.1",
          "node-notifier": "^5.0.2",
          "node-sass": "^4.9.3",
          "postcss": "^7.0.2",
          "raw-loader": "^0.5.1",
          "sass-loader": "^7.1.0",
          "source-map": "^0.7.3",
          "style-loader": "^0.23.0",
          "url-loader": "^1.1.1",
          "webpack": "^4.18.0",
          "webpack-bundle-analyzer": "^3.0.2",
          "webpack-dev-server": "^3.1.8",
          "webpack-merge": "^4.1.4",
          "webpack-stream": "^5.1.1",
          "yargs": "^12.0.2"
        },
        "scripts": {
          "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
          "build": "./node_modules/.bin/gulp build",
          "watch": "./node_modules/.bin/gulp watch",
          "run-dev": "./node_modules/.bin/webpack -d --progress --colors --display-error-details",
          "run-prod": "./node_modules/.bin/webpack -p --progress --colors --display-error-details",
          "profile-dev": "./node_modules/.bin/webpack --profile -d --progress --colors --display-error-details --json &gt; stats.json",
          "profile-prod": "./node_modules/.bin/webpack --profile -p --progress --colors --display-error-details --json &gt; stats.json",
          "serve-cold": "./node_modules/.bin/webpack-dev-server --progress --colors --inline",
          "serve-hot": "./node_modules/.bin/webpack-dev-server --progress --colors --inline --hot",
          "serve-api": "node server.express.js",
          "watch-dev": "./node_modules/.bin/webpack --watch -d --progress --colors --display-error-details",
          "watch-prod": "./node_modules/.bin/webpack --watch -p --progress --colors --display-error-details",
          "postinstall": "./node_modules/.bin/gulp postinstall"
        },
        "author": "",
        "license": ""
      }
  </code></p>
  
  <p>gulpfile.babel.js
  `</p>
  
  <pre><code>'use strict';
  /// &lt;binding BeforeBuild='build:jsx' AfterBuild='build' ProjectOpened='watch, build' /&gt;
  /* This file in the main entry point for defining Gulp tasks and using Gulp plugins. Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 */
  
  // TODO: 
  // *- handle dev vs. production
  // *- webpackStream modes
  
  const gulp = require('gulp');
  const $ = require('gulp-load-plugins')({ lazy: true });
  //const fs = require('fs');
  //const path = require('path');
  //const glob = require('glob');
  const args = require('yargs').argv;
  const config = require('./gulp.config')();
  const del = require('del');
  const notifier = require('node-notifier');
  const merge = require('merge-stream');
  const autoprefixer = new require('autoprefixer')({ browsers: ['last 2 versions'] });
  const webpack = require('webpack');
  const webpackStream = require('webpack-stream');
  const consoleStats = {
    colors: true,
    exclude: ["node_modules"],
    chunks: false,
    assets: false,
    timings: true,
    modules: false,
    hash: false,
    version: false
  };
  
  config.verbose = args.verbose || config.verbose;
  config.isProduction = args.isProduction || config.isProduction;
  
  if (config.isProduction) {
    process.env.NODE_ENV = 'production';
    log('***** PRODUCTION BUILD *****');
  } else {
    log('***** DEBUG BUILD *****');
  }
  
  //*********************
  // Dev Tasks
  //*********************
  
  gulp.task('clean', cleanSourceFolders);
  gulp.task('build:jsx', buildJSX);
  gulp.task('build:scss', buildCSS);
  gulp.task('copy:static-content', copyStaticContent);
  gulp.task('copy:bootstrap-sass', buildBootstrapPostInstall);
  gulp.task('notify:build', displayBuildStart);
  gulp.task('notify:build:end', displayBuildEnd);
  gulp.task('watch:jsx', watchJSX);
  gulp.task('watch:scss', watchSCSS);
  gulp.task('watch:static-content', watchStaticContent);
  gulp.task('postinstall', gulp.series('copy:bootstrap-sass'));
  
  gulp.task(
    'build',
    gulp.series(
      //displayBuildStart,
      "clean",
      gulp.parallel(
        'build:jsx',
        'build:scss'
      ),
      // DLW: 'postinstall',
      'copy:static-content'
      //displayBuildEnd
  ));
  
  gulp.task('watch',
    function () {
      gulp.watch('watch:scss', watchSCSS());
      gulp.watch('watch:jsx', watchJSX());
  });
  
  function log(msg) {
    "use strict";
  
    if (typeof msg === 'object') {
      for (let item in msg) {
        if (msg.hasOwnProperty(item)) {
          $.util.log($.util.colors.blue(msg[item]));
        }
      }
    } else {
      $.util.log($.util.colors.blue(msg));
    }
  }
  
  function displayNotification(msg) {
    return notifier.notify({
      title: 'Gulp -- Building',
      message: msg,
      icon: __dirname + '/node_modules/gulp-notify/assets/gulp.png'
    });
  }
  
  function cleanSourceFolders(cb) {
    let destinationPaths = [
      config.paths.webCss,
      config.paths.webFonts,
      config.paths.webImages,
      config.paths.webJs //,
      // DLW config.paths.webRoot
    ];
  
    destinationPaths.map(path =&gt; {
      console.log("Cleaning path :" + path);
      del(path + '*').then(paths =&gt; {
        if (config.verbose) {
          paths.forEach(function (path) {
            log($.util.colors.magenta(path));
          });
        }
      })
    });
  
    cb();
  }
  
  function displayBuildStart(cb) {
    displayNotification('Building...');
    cb();
  }
  
  function displayBuildEnd(cb) {
    displayNotification('Build complete.');
    cb();
  }
  
  function buildJSX() {
    let webpackConfig = require('./webpack.config');
  
    // output.path conflicts with gulp.dest below, so we remove it
    delete webpackConfig.output.path;
  
    return gulp.src(config.paths.sourceRoot)
      .pipe($.changed(config.paths.webJs))
      .pipe(webpackStream(webpackConfig, webpack))
      .pipe(gulp.dest(config.paths.webJs));
  }
  
  // Compile SASS/SCSS to CSS
  function buildCSS() {
    "use strict";
  
    log('Compiling SCSS --&gt; CSS');
  
    return gulp
      .src(config.paths.scssSource)
      .pipe($.changed(config.paths.webCss))
      .pipe($.plumber({
        errorHandler: $.notify.onError({
          title: 'Gulp -- Build',
          message: "Error: &lt;%= error.message %&gt;"
        })
      }))
      .pipe($.sourcemaps.init())
      // perform scss compilation w/auto-prefixing
      .pipe($.sass().on('error', $.sass.logError))
      .pipe($.postcss([autoprefixer]))
      .pipe($.wrapper({ header: config.header }))
      // write non-minified version
      .pipe(gulp.dest(config.paths.webCss))
      //.pipe($.cssmin())
      .pipe($.rename({ extname: '.min.css' }))
      .pipe($.sourcemaps.write())
      .pipe($.wrapper({ header: config.header }))
      // write minified/source-mapped version
      .pipe(gulp.dest(config.paths.webCss));
  }
  
  // NOTE: The following task is referenced by package.json (post-install task)
  function buildBootstrapPostInstall() {
    // Copies the installed version of bootstrap-sass to the scss source folder
    return gulp.src(config.paths.nodeModules + 'bootstrap-sass/assets/stylesheets/bootstrap/**/*.*')
      .pipe(gulp.dest(config.paths.sourceRoot + 'scss/bootstrap'));
  }
  
  function copyStaticContent() {
    let contentFiles = gulp.src([
      config.paths.imageSource,
      config.paths.htmlSource
    ],
    {
      base: config.paths.sourceRoot
    })
    .pipe(gulp.dest(config.paths.webRoot));
  
    // Fonts and static css files need to be handled separately because
    // some source locations are in the node_modules folder (which
    // does not share a common sourceRoot/base folder)
    let cssFiles = gulp.src(config.paths.cssSource)
      .pipe(gulp.dest(config.paths.webCss));
  
    let fontFiles = gulp.src(config.paths.fontSource)
      .pipe(gulp.dest(config.paths.webFonts));
  
    // let boostrapTheme = gulp.src(config.paths.fontSource)
    //    .pipe(gulp.dest(config.paths.webFonts));
  
    return merge(contentFiles, fontFiles, cssFiles);
  }
  
  function watchJSX() {
    const WebpackDevServer = require('webpack-dev-server');
    const webpackConfig = require('./webpack.config');
    const compiler = webpack(webpackConfig);
    const server = new WebpackDevServer(compiler,
      {
        publicPath: config.paths.webRoot,
        hot: true,
        stats: consoleStats
      });
  
    server.listen(8080,
      () =&gt; {});
  }
  
  function watchSCSS() {
    console.log('Watching SCSS...');
    return gulp.watch(config.paths.scssSource, buildCSS);
  }
  
  function watchStaticContent() {
    let base = config.paths.sourceRoot,
      source = [
        config.paths.htmlSource,
        config.paths.imageSource
      ],
      dest = config.paths.webRoot;
  
    return gulp.src(source, { base: base })
      .pipe($.if(config.verbose, $.print()))
      .pipe($.watch(source, { base: base }))
      .pipe(gulp.dest(dest));
  }
  </code></pre>
  
  <p>`</p>