Error in plugin webpack stream

In going through and updating all the npm packages in a React application, I’ve encountered an error when performing a gulp build command from the terminal.

Unhandled rejection Error in plugin "webpack-stream"
Message: Module build failed
Error: Plugin/Preset files are not allowed to export objects, only functions.

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.

package.json file:

{
"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" && 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 > stats.json",
"profile-prod": "./node_modules/.bin/webpack --profile -p --progress --colors --display-error-details --json > 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": ""
}


gulpfile.babel.js
`

'use strict';
/// <binding BeforeBuild='build:jsx' AfterBuild='build' ProjectOpened='watch, build' />
/* 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 => {
    console.log("Cleaning path :" + path);
    del(path + '*').then(paths => {
      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 --> CSS');

  return gulp
    .src(config.paths.scssSource)
    .pipe($.changed(config.paths.webCss))
    .pipe($.plumber({
      errorHandler: $.notify.onError({
        title: 'Gulp -- Build',
        message: "Error: <%= error.message %>"
      })
    }))
    .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,
    () => {});
}

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));
}

`

Hi

I’ve just installed the newest version of foundation-cli, when using it with my existing project I don’t seem to have an issue, however after creating my new project, I cannot use the commands build or watch without receiving an error as follows:

How to reproduce this bug:

1. Open terminal
2. cd to sites directory
3. exec foundation new
4. ? What are you building today? A website (Foundation for Sites)
5. ? What’s the project called? (no spaces) mynewsite
6. ? Which template would you like to use? ZURB Template: includes Handlebars templates and Sass/JS compilers
7. cd mynewsite
8. exec foundation watch

What should happen:

1. A new project called mynewsite is created
2. Bowser window should open and site should be displayed

What happened instead:

You’re all set!

✓ New project folder created.
✓ Node modules installed.
✓ Bower components installed.

Now run foundation watch while inside the mynewsite folder.

➜ Sites cd mynewsite
➜ mynewsite foundation watch

foundation-zurb-template@1.0.0 start /Users/lindsay/Sites/mynewsite
gulp

[11:15:04] Requiring external module babel-register
[11:15:08] Using gulpfile ~/Sites/mynewsite/gulpfile.babel.js
[11:15:08] Starting ‘default’…
[11:15:08] Starting ‘build’…
[11:15:08] Starting ‘clean’…
[11:15:08] Finished ‘clean’ after 3.43 ms
[11:15:08] Starting ‘pages’…
[11:15:08] Starting ‘sass’…
[11:15:08] Starting ‘javascript’…
[11:15:08] Starting ‘images’…
[11:15:08] Starting ‘copy’…
[11:15:09] Finished ‘images’ after 943 ms
[11:15:09] Finished ‘pages’ after 1.08 s
[11:15:09] Finished ‘copy’ after 1.11 s
[11:15:16] Finished ‘sass’ after 7.34 s
[11:15:16] ‘javascript’ errored after 7.43 s
[11:15:16] Error in plugin ‘webpack-stream’
Message:
./src/assets/js/app.js
Module not found: Error: Can’t resolve ‘jquery’ in ‘/Users/lindsay/Sites/mynewsite/src/assets/js’
resolve ‘jquery’ in ‘/Users/lindsay/Sites/mynewsite/src/assets/js’
Parsed request is a module
using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./src/assets/js)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./src/assets/js)
resolve as module
/Users/lindsay/Sites/node_modules doesn’t exist or is not a directory
/Users/node_modules doesn’t exist or is not a directory
/node_modules doesn’t exist or is not a directory
/Users/lindsay/Sites/mynewsite/src/node_modules doesn’t exist or is not a directory
/Users/lindsay/Sites/mynewsite/src/assets/node_modules doesn’t exist or is not a directory
/Users/lindsay/Sites/mynewsite/src/assets/js/node_modules doesn’t exist or is not a directory
looking for modules in /Users/lindsay/Sites/mynewsite/node_modules
using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./node_modules)
using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./node_modules/jquery)
as directory
/Users/lindsay/Sites/mynewsite/node_modules/jquery doesn’t exist
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/Sites/mynewsite/node_modules/jquery doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/Sites/mynewsite/node_modules/jquery.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/Sites/mynewsite/node_modules/jquery.json doesn’t exist
looking for modules in /Users/lindsay/node_modules
using description file: /Users/lindsay/package.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /Users/lindsay/package.json (relative path: ./node_modules)
using description file: /Users/lindsay/package.json (relative path: ./node_modules/jquery)
as directory
/Users/lindsay/node_modules/jquery doesn’t exist
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/node_modules/jquery doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/node_modules/jquery.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/node_modules/jquery.json doesn’t exist
[/Users/lindsay/Sites/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/lindsay/Sites/mynewsite/src/node_modules]
[/Users/lindsay/Sites/mynewsite/src/assets/node_modules]
[/Users/lindsay/Sites/mynewsite/src/assets/js/node_modules]
[/Users/lindsay/Sites/mynewsite/node_modules/jquery]
[/Users/lindsay/Sites/mynewsite/node_modules/jquery]
[/Users/lindsay/Sites/mynewsite/node_modules/jquery.js]
[/Users/lindsay/Sites/mynewsite/node_modules/jquery.json]
[/Users/lindsay/node_modules/jquery]
[/Users/lindsay/node_modules/jquery]
[/Users/lindsay/node_modules/jquery.js]
[/Users/lindsay/node_modules/jquery.json]
@ ./src/assets/js/app.js 3:14-31
@ multi ./src/assets/js/app.js./src/assets/js/app.js
Module not found: Error: Can’t resolve ‘what-input’ in ‘/Users/lindsay/Sites/mynewsite/src/assets/js’
resolve ‘what-input’ in ‘/Users/lindsay/Sites/mynewsite/src/assets/js’
Parsed request is a module
using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./src/assets/js)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./src/assets/js)
resolve as module
/Users/lindsay/Sites/node_modules doesn’t exist or is not a directory
/Users/node_modules doesn’t exist or is not a directory
/node_modules doesn’t exist or is not a directory
/Users/lindsay/Sites/mynewsite/src/node_modules doesn’t exist or is not a directory
/Users/lindsay/Sites/mynewsite/src/assets/node_modules doesn’t exist or is not a directory
/Users/lindsay/Sites/mynewsite/src/assets/js/node_modules doesn’t exist or is not a directory
looking for modules in /Users/lindsay/Sites/mynewsite/node_modules
using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./node_modules)
using description file: /Users/lindsay/Sites/mynewsite/package.json (relative path: ./node_modules/what-input)
as directory
/Users/lindsay/Sites/mynewsite/node_modules/what-input doesn’t exist
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/Sites/mynewsite/node_modules/what-input doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/Sites/mynewsite/node_modules/what-input.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/Sites/mynewsite/node_modules/what-input.json doesn’t exist
looking for modules in /Users/lindsay/node_modules
using description file: /Users/lindsay/package.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /Users/lindsay/package.json (relative path: ./node_modules)
using description file: /Users/lindsay/package.json (relative path: ./node_modules/what-input)
as directory
/Users/lindsay/node_modules/what-input doesn’t exist
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/node_modules/what-input doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/node_modules/what-input.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
/Users/lindsay/node_modules/what-input.json doesn’t exist
[/Users/lindsay/Sites/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/lindsay/Sites/mynewsite/src/node_modules]
[/Users/lindsay/Sites/mynewsite/src/assets/node_modules]
[/Users/lindsay/Sites/mynewsite/src/assets/js/node_modules]
[/Users/lindsay/Sites/mynewsite/node_modules/what-input]
[/Users/lindsay/Sites/mynewsite/node_modules/what-input]
[/Users/lindsay/Sites/mynewsite/node_modules/what-input.js]
[/Users/lindsay/Sites/mynewsite/node_modules/what-input.json]
[/Users/lindsay/node_modules/what-input]
[/Users/lindsay/node_modules/what-input]
[/Users/lindsay/node_modules/what-input.js]
[/Users/lindsay/node_modules/what-input.json]
@ ./src/assets/js/app.js 7:17-38
@ multi ./src/assets/js/app.js
Details:
domain: [object Object]
domainThrown: true
[11:15:16] ‘build’ errored after 7.43 s
[11:15:16] ‘default’ errored after 7.44 s
Error: foundation-zurb-template@1.0.0 start: gulp
Exit status 1
at EventEmitter. (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/lifecycle.js:217:16)
at emitTwo (events.js:106:13)
at EventEmitter.emit (events.js:191:7)
at ChildProcess. (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/spawn.js:24:14)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:877:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
➜ mynewsite

Browser(s) and Device(s) tested on:

N/A

Foundation Version(s) you are using:

6.4.0

Test case link:

N/A

‘makeWebpackPkg’ errored. Error in plugin ‘webpack-stream’, modules not found #4120

Type of issue

Description

When I go to build a prebid.js file from mac terminal using gulp build —modules=/path_to_file/pbModules.json I get a very long error that starts with an error in the makeWebpackPkg and webpack-stream plugins

Steps to reproduce

The last time I used terminal to build prebid was 2018 when my download was version 1.25.
I typed git pull to update all the files and received 2.30 as the new version in the files.
Then after typing the command gulp build —modules=/path_to_file/pbModules.json , that’s when I get these errors.

I also tried redownloading the files before I did git pull and this same thing happened.

Platform details

2015 Macbook Pro, 10.14.5

Actual results

Here’s only the start of the error output since a lot of it repeats and there’s quite a lot of it. It mentions a number of modules are not found in directories that don’t exist, nor that I see as downloadable on the git homepage for prebid.

The text was updated successfully, but these errors were encountered:

Did you clear out your project’s node_modules folder after downloading all the updates from Prebid 2.x (via your git pull )? If not, can you try to remove that folder and rerun npm install to download all the dependencies, and then try to run the build again?

There were a number of package updates/changes between the various releases, and this problem sounds like it may just be some of those packages are missing and should clear up once everything is reinstalled.

Hi @jsnellbaker,
I did not remove the node_modules folder after updating via git pull .
I just now went in and manually deleted the node_modules folder, then went back into the Prebid.js directory in terminal and typed npm install . That worked fine but when I went to build using gulp build —modules= like before, I got the exact same long error as before.

@tornajoe Thanks for the update and giving that suggestion a try.

Can you share a copy of the pbModules.json file so I can try it on my end?

[ «33acrossBidAdapter», «aolBidAdapter», «appnexusBidAdapter», «audienceNetworkBidAdapter», «conversantBidAdapter», «criteoBidAdapter», «districtmBidAdapter», «districtmDMXBidAdapter», «gumgumBidAdapter», «ixBidAdapter», «justPremiumBidAdapter», «lockerdomeBidAdapter», «openxBidAdapter», «prebidServerBidAdapter», «pubmaticBidAdapter», «rubiconBidAdapter», «sharethroughBidAdapter», «sonobiBidAdapter», «sovrnBidAdapter», «sublimeBidAdapter», «teadsBidAdapter», «tripleliftBidAdapter», «undertoneBidAdapter», «yieldmoBidAdapter», «googleAnalyticsAdapter», «consentManagement», «currency», «express», «dfpAdServerVideo», «pubCommonId», «s2sTesting» ]

Few notes in the interim:

• districtmBidAdapter is not an actual file. The districtm bidder is just an alias of the appnexusBidAdapter , so you don’t need to include it in this module list since you already have the appnexusBidAdapter file included.
• justPremiumBidAdapter should be justpremiumBidAdapter

The main issue though seems to be with the express module. Still investigating into that part.

DistrictM was confusing to me because on the prebid.org/download page, you can select both districtM and districtmDMX. But I also knew when I looked at the folder with the modules, only districtmDMXBidAdapter showed up. So thank you for clarifying as to why that is. I’ve also corrected the just premium error.

Thank you for you continued assistance into this and the express module.

Источник

Перестал работать gulp (ошибка в «build-js» и плагине «»webpack-stream)

Курс «Создание административной панели на React JS + PHP», урок 1.4

После создания функции getPageList() и применения её в обработчике события, при запуске gulp не собирается проект и пишет ошибку:

[10:49:27] ‘build-js’ errored after 3.93 s
[10:49:27] Error in plugin «webpack-stream»

[10:49:27] ‘build’ errored after 4.02 s
[10:49:27] ‘default’ errored after 4.03 s

Перерыл интернет, там написано что webpack-stream может просить старую версию webpack1, но настроить мне не удается.

Переустанавливал несколько раз webpack, webpack-stream, не помогает.

Вот полный log при запуске gulp:

PS E:MAMPhtdocsproject> gulp
[10:49:23] Using gulpfile E:MAMPhtdocsprojectgulpfile.js
[10:49:23] Starting ‘default’.
[10:49:23] Starting ‘watch’.
[10:49:23] Starting ‘build’.
[10:49:23] Starting ‘copy-html’.
[10:49:23] Starting ‘copy-assets’.
[10:49:23] Starting ‘copy-api’.
[10:49:23] Starting ‘build-sass’.
[10:49:23] Starting ‘build-js’.
[10:49:23] Finished ‘copy-assets’ after 531 ms
[10:49:24] Finished ‘copy-html’ after 914 ms
[10:49:24] Finished ‘build-sass’ after 934 ms
[10:49:24] Finished ‘copy-api’ after 975 ms
@babel/preset-env: `DEBUG` option

Using modules transform: auto

Using plugins:
proposal-numeric-separator < >
proposal-logical-assignment-operators < >
proposal-nullish-coalescing-operator < >
proposal-optional-chaining < >
proposal-json-strings < >
proposal-optional-catch-binding < >
transform-parameters < >
proposal-async-generator-functions < >
proposal-object-rest-spread < >
transform-dotall-regex < >
proposal-unicode-property-regex < >
transform-named-capturing-groups-regex < >
transform-async-to-generator < >
transform-exponentiation-operator < >
transform-template-literals < >
transform-literals < >
transform-function-name < >
transform-arrow-functions < >
transform-block-scoped-functions < >
transform-classes < >
transform-object-super < >
transform-shorthand-properties < >
transform-duplicate-keys < >
transform-computed-properties < >
transform-for-of < >
transform-sticky-regex < >
transform-unicode-escapes < >
transform-unicode-regex < >
transform-spread < >
transform-destructuring < >
transform-block-scoping < >
transform-typeof-symbol < >
transform-new-target < >
transform-regenerator < >
transform-member-expression-literals < >
transform-property-literals < >
transform-reserved-words < >
proposal-export-namespace-from < >
syntax-dynamic-import
syntax-top-level-await
corejs3: `DEBUG` option

Using polyfills with `usage-global` method:
regenerator: `DEBUG` option

Using polyfills with `usage-global` method:

[E:MAMPhtdocsprojectappsrcmain.js]
The corejs3 polyfill added the following polyfills:
es.array.for-each <>
web.dom-collections.for-each <>

[E:MAMPhtdocsprojectappsrcmain.js]
Based on your code and targets, the regenerator polyfill did not add any polyfill.
[10:49:27] ‘build-js’ errored after 3.93 s
[10:49:27] Error in plugin «webpack-stream»
Message:
./app/src/main.js
Module not found: Error: Can’t resolve ‘core-js/fn/reflect’ in ‘E:MAMPhtdocsprojectappsrc’
resolve ‘core-js/fn/reflect’ in ‘E:MAMPhtdocsprojectappsrc’
Parsed request is a module
using description file: E:MAMPhtdocsprojectpackage.json (relative path: ./app/src)
Field ‘browser’ doesn’t contain a valid alias configuration
resolve as module
E:MAMPhtdocsprojectappsrcnode_modules doesn’t exist or is not a directory
E:MAMPhtdocsprojectappnode_modules doesn’t exist or is not a directory
E:MAMPhtdocsnode_modules doesn’t exist or is not a directory
E:MAMPnode_modules doesn’t exist or is not a directory
E:node_modules doesn’t exist or is not a directory
looking for modules in E:MAMPhtdocsprojectnode_modules
using description file: E:MAMPhtdocsprojectpackage.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
using description file: E:MAMPhtdocsprojectnode_modulescore-jspackage.json (relative path: ./fn/reflect)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect doesn’t exist
.wasm
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.wasm doesn’t exist
.mjs
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.mjs doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.json doesn’t exist
as directory
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect doesn’t exist
[E:MAMPhtdocsprojectappsrcnode_modules]
[E:MAMPhtdocsprojectappnode_modules]
[E:MAMPhtdocsnode_modules]
[E:MAMPnode_modules]
[E:node_modules]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.wasm]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.mjs]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.js]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.json]
@ ./app/src/main.js 3:0-41
Details:
domainThrown: true

[10:49:27] ‘build’ errored after 4.02 s
[10:49:27] ‘default’ errored after 4.03 s

Источник

Необработанный отказ Ошибка в плагине «webpack-stream»

При просмотре и обновлении всех пакетов npm в приложении React я обнаружил ошибку при выполнении команды gulp build с терминала.

Unhandled rejection Error in plugin «webpack-stream» Message: Module build failed Error: Plugin/Preset files are not allowed to export objects, only functions.

Файлы, в которых, похоже, возникает проблема, находятся в стороннем npm_modules babel-loader и babel-preset-react. Я проверил, что все эти «зависимости» обновлены до самого последнего общего выпуска, и даже попробовал версию @latest, но без изменений в поведении — я все еще не могу произвести успешную сборку gulp моего проекта.

Поделитесь своими gulpfile.js и package.json .

@sdgluck Я добавил package.json и gulpfile.babel.js в надежде, что это поможет что-то раскрыть.

Я подозреваю, что проблема в том, что у вас есть несоответствие между версией ядра Babel и плагинами / пресетами Babel, которые вы используете. У вас @babel/core основной версии 7, но все ваши плагины и пресеты имеют основную версию 6.

Обновите все свои плагины и пресеты до основной версии 7. Вы можете использовать babel-upgrade , чтобы помочь вам.

Во всяком случае, это приблизило меня на один шаг . и, вау . оно добавило массу зависимостей, которых у меня раньше не было в файле package.json. Я все еще вижу ошибку необработанного отказа в плагине webpack-stream, но теперь он лает при загрузке файла JSON, что, как я думаю, должен делать webpack 4 в качестве базовой функциональности. Я даже добавил json-loader, и это тоже не решило проблему.

@rcastagna Вы можете задать новый вопрос по этому поводу, если это все еще проблема для вас.

Источник

webpack-stream

Run webpack as a stream to conveniently integrate with gulp.

Installation

If you have npm run the following command in the console npm install —save-dev webpack-stream

Usage

The above will compile src/entry.js into assets with webpack into dist/ with the output filename of [hash].js (webpack generated hash of the build).

You can pass webpack options in with the first argument, including watch which will greatly decrease compilation times:

Or just pass in your webpack.config.js :

If you would like to use a different version of webpack than the one this plugin uses, pass in an optional 2nd argument:

Pass in 3rd argument if you want to access the stats outputted from webpack when the compilation is done:

Usage with gulp watch

To use gulp watch , it’s required that you explicitly pass webpack in the 2nd argument for a cached compiler instance to be used on subsequent runs.

Please note that gulp watch and webpack watch are mutually exclusive.

Multiple Entry Points

A common request is how to handle multiple entry points. You can continue to pass in an entry option in your typical webpack config like so:

Or pipe files through a stream that names the chunks. A convenient library for this is vinyl-named:

The above named() stream will add a .named property to the vinyl files passing through. The webpack() stream will read those as entry points and even group entry points with common names together.

Source Maps

Source maps are built into webpack, specify a devtool:

Now the appropriate .map files will be emitted. Or set to inline-source-map to inline the source maps into the files.

If you need further special handling of source maps, such as using with gulp-sourcemaps then just pipe to a stream and handle the source map files emitted by webpack:

Multi-compiler support

Multiple compilers are supported, but instead of passing the webpack configuration directly, you have to wrap it in an object under the key ‘config’.

Release History

• Please check the commit log in the future for release history.
• 4.0.0 — Update webpack to ^3.4.1 . Update memory-fs and vinyl dependencies. Emit compilation-error instead of error when watching (@jeroennoten). Fix error when compiler throws an error (@renminghao). Fix error when stats is undefined (@Simek).
• 3.2.0 — Ability to use multiple compilers (@saschagehlich).
• 3.1.0 — Better error output (@hi-q).
• 3.0.1 — Fix fonts being passed through streams (@mattlewis92).
• 3.0.0 — Remove special handling of source maps. Update dependencies.
• 2.3.0 — Emit stats.compilation.errors as error (@JakeChampion).
• 2.2.0 — Add support for source maps (@OliverJAsh).
• 2.1.0 — Avoid modifying options by reference (@shinuza). Replace log with correct package name (@vinnymac).
• 2.0.0 — Rename to webpack-stream and now it’s totally not a gulp plugin.
• 1.5.0 — Update webpack to 1.9.x (@nmccready). Update other dependencies.
• 1.4.0 — Update webpack to 1.8.x (@Zolmeister).
• 1.3.2 — Fix another place with ? in name (@raphaelluchini).
• 1.3.1 — Fix for paths with ? in their name (@raphaelluchini).
• 1.3.0 — Updating to webpack >= 1.7.
• 1.2.0 — Updating to webpack >= 1.5, vinyl >= 0.4, memory-fs >= 0.2.
• 1.1.2 — Fixes to default stats for logging (@mdreizin).
• 1.1.1 — Add additional stats to default logging (@mdreizin).
• 1.1.0 — Exposes internal webpack if asked via require(‘webpack-stream’).webpack
• 1.0.0 — Support named chunks pipe’d in for multiple entry points.
• 0.4.1 — Fixed regression for multiple entry point support.
• 0.4.0 — Display an error message if there are no input files (@3onyc). Add message on why task is not finishing, Add ability to track compilation progress, Add ability to configure stats output via options (@kompot). Bump webpack version (@koistya).
• 0.3.0 — Update deps (@kompot). Fixes to determining entry (@btipling and @abergs).
• 0.2.0 — Support for watch mode (@ampedandwired).
• 0.1.0 — Initial release

License

Copyright (c) 2021 Kyle Robinson Young Licensed under the MIT license.

Источник

При просмотре и обновлении всех пакетов npm в приложении React я обнаружил ошибку при выполнении команды gulp build с терминала.

Unhandled rejection Error in plugin "webpack-stream"
Message: Module build failed
Error: Plugin/Preset files are not allowed to export objects, only functions.

Файлы, в которых, похоже, возникает проблема, находятся в стороннем npm_modules babel-loader и babel-preset-react. Я проверил, что все эти «зависимости» обновлены до самого последнего общего выпуска, и даже попробовал версию @latest, но без изменений в поведении — я все еще не могу произвести успешную сборку gulp моего проекта.

Файл package.json: <код> { «название»: «», «версия»: «0.1.0», «описание»: «», «main»: «apps / poc / index.html», «частный»: правда, «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», «шанс»: «^ 1.0.16», «имена классов»: «^ 2.2.6», «es6-обещание»: «^ 4.2.5», «font-awesome»: «^ 4.7.0», «история»: «^ 4.6.3», «неизменяемость-помощник»: «^ 2.7.1», «момент»: «^ 2.22.2», «момент-диапазон»: «^ 4.0.1», «момент-часовой пояс»: «^ 0.5.21», «объект-назначение»: «^ 4.1.1», «записи-объекты»: «^ 1.0.0», «объект-ключи»: «^ 1.0.12», «object.entries»: «^ 1.0.4», «object.values»: «^ 1.0.4», «prop-types»: «^ 15.6.2», «строка-запроса»: «^ 6.1.0», «реагировать»: «^ 16.5.0», «react-bootstrap»: «^ 0.32.4», «реагировать-bootstrap-date-picker»: «^ 5.1.0», «реагировать-датапикер»: «^ 1.6.0», «response-datetime»: «^ 2.15.0», «react-dom»: «^ 16.5.0», «react-fontawesome»: «^ 1.6.1», «react-hot-loader»: «^ 4.3.6», «реагировать-портал»: «^ 4.1.5», «react-redux»: «^ 5.0.7», «react-redux-toastr»: «^ 7.4.0», «реагировать-маршрутизатор»: «^ 4.3.1», «реагировать-маршрутизатор-дом»: «^ 4.3.1», «response-router-redux»: «^ 5.0.0-alpha.6», «реакция-времяаго»: «^ 4.1.9», «реакция-переключение»: «^ 4.0.2», «реакция-переход-группа»: «^ 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», «повторно выбрать»: «^ 3.0.1», «следует»: «^ 13.2.3», «signature_pad»: «^ 2.3.2», «простая-реакция-бутстрап-кнопка-раскрывающийся список»: «^ 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», «дель»: «^ 3.0.0», «фермент»: «^ 3.6.0», «eslint»: «^ 5.5.0», «eslint-loader»: «^ 2.1.0», «eslint-plugin-react»: «^ 7.11.1», «экспресс»: «^ 4.14.1», «extract-text-webpack-plugin»: «^ 3.0.2», «фейкер»: «^ 4.1.0», «файл-загрузчик»: «^ 2.0.0», «glob»: «^ 7.1.3», «graceful-fs»: «^ 4.1.11», «gulp»: «github: gulpjs / gulp # 4.0», «gulp-autoprefixer»: «^ 6.0.0», «глоток-бабель»: «^ 8.0.0», «глоток-изменен»: «^ 3.2.0», «gulp-concat»: «^ 2.6.1», «глоток-cssmin»: «^ 0.2.0», «глоток-если»: «^ 2.0.2», «без глотка»: «^ 4.0.1», «gulp-load-plugins»: «^ 1.5.0», «глоток-мокко»: «^ 6.0.0», «gulp-notify»: «^ 3.0.0», «глоток-сантехник»: «^ 1.1.0», «gulp-postcss»: «^ 8.0.0», «глоток-печать»: «^ 5.0.0», «глоток-переименование»: «^ 1.4.0», «gulp-sass»: «^ 4.0.1», «gulp-sourcemaps»: «^ 2.4.1», «список-задач-глотков»: «^ 1.1.0», «gulp-uglify»: «^ 3.0.1», «gulp-util»: «^ 3.0.8», «глоток-часы»: «^ 5.0.1», «глоток-обертка»: «^ 1.0.0», «импорт-загрузчик»: «^ 0.8.0», «jquery»: «^ 3.3.1», «json-loader»: «^ 0.5.4», «json-schema-faker»: «^ 0.4.0», «livereload»: «^ 0.7.0», «поток слияния»: «^ 1.0.1», «уведомитель узла»: «^ 5.0.2», «node-sass»: «^ 4.9.3», «postcss»: «^ 7.0.2», «raw-loader»: «^ 0.5.1», «sass-loader»: «^ 7.1.0», «исходная карта»: «^ 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», «яргс»: «^ 12.0.2» }, «scripts»: { «test»: «echo » Ошибка: тест не указан «&& exit 1», «build»: «./node_modules/.bin/gulp build», «смотреть»: «./node_modules/.bin/gulp смотреть», «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> stats.json», «profile-prod»: «./node_modules/.bin/webpack —profile -p —progress —colors —display-error-details —json> 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»: «узел 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» }, «автор»: «», «лицензия»: «» }

Gulpfile.babel.js `

'use strict';
/// <binding BeforeBuild='build:jsx' AfterBuild='build' ProjectOpened='watch, build' />
/* 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 => {
    console.log("Cleaning path :" + path);
    del(path + '*').then(paths => {
      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 --> CSS');

  return gulp
    .src(config.paths.scssSource)
    .pipe($.changed(config.paths.webCss))
    .pipe($.plumber({
      errorHandler: $.notify.onError({
        title: 'Gulp -- Build',
        message: "Error: <%= error.message %>"
      })
    }))
    .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,
    () => {});
}

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));
}

`

Курс «Создание административной панели на React JS + PHP», урок 1.4

После создания функции getPageList() и применения её в обработчике события, при запуске gulp не собирается проект и пишет ошибку:

[10:49:27] ‘build-js’ errored after 3.93 s
[10:49:27] Error in plugin «webpack-stream»

в конце выдает:

[10:49:27] ‘build’ errored after 4.02 s
[10:49:27] ‘default’ errored after 4.03 s

Перерыл интернет, там написано что webpack-stream может просить старую версию webpack1, но настроить мне не удается.

Переустанавливал несколько раз webpack, webpack-stream, не помогает.

Вот полный log при запуске gulp:

PS E:MAMPhtdocsproject> gulp
[10:49:23] Using gulpfile E:MAMPhtdocsprojectgulpfile.js
[10:49:23] Starting ‘default’…
[10:49:23] Starting ‘watch’…
[10:49:23] Starting ‘build’…
[10:49:23] Starting ‘copy-html’…
[10:49:23] Starting ‘copy-assets’…
[10:49:23] Starting ‘copy-api’…
[10:49:23] Starting ‘build-sass’…
[10:49:23] Starting ‘build-js’…
[10:49:23] Finished ‘copy-assets’ after 531 ms
[10:49:24] Finished ‘copy-html’ after 914 ms
[10:49:24] Finished ‘build-sass’ after 934 ms
[10:49:24] Finished ‘copy-api’ after 975 ms
@babel/preset-env: `DEBUG` option

Using targets:
{}

Using modules transform: auto

Using plugins:
proposal-numeric-separator { }
proposal-logical-assignment-operators { }
proposal-nullish-coalescing-operator { }
proposal-optional-chaining { }
proposal-json-strings { }
proposal-optional-catch-binding { }
transform-parameters { }
proposal-async-generator-functions { }
proposal-object-rest-spread { }
transform-dotall-regex { }
proposal-unicode-property-regex { }
transform-named-capturing-groups-regex { }
transform-async-to-generator { }
transform-exponentiation-operator { }
transform-template-literals { }
transform-literals { }
transform-function-name { }
transform-arrow-functions { }
transform-block-scoped-functions { }
transform-classes { }
transform-object-super { }
transform-shorthand-properties { }
transform-duplicate-keys { }
transform-computed-properties { }
transform-for-of { }
transform-sticky-regex { }
transform-unicode-escapes { }
transform-unicode-regex { }
transform-spread { }
transform-destructuring { }
transform-block-scoping { }
transform-typeof-symbol { }
transform-new-target { }
transform-regenerator { }
transform-member-expression-literals { }
transform-property-literals { }
transform-reserved-words { }
proposal-export-namespace-from { }
syntax-dynamic-import
syntax-top-level-await
corejs3: `DEBUG` option

Using targets: {}

Using polyfills with `usage-global` method:
regenerator: `DEBUG` option

Using targets: {}

Using polyfills with `usage-global` method:

[E:MAMPhtdocsprojectappsrcmain.js]
The corejs3 polyfill added the following polyfills:
es.array.for-each {}
web.dom-collections.for-each {}

[E:MAMPhtdocsprojectappsrcmain.js]
Based on your code and targets, the regenerator polyfill did not add any polyfill.
[10:49:27] ‘build-js’ errored after 3.93 s
[10:49:27] Error in plugin «webpack-stream»
Message:
./app/src/main.js
Module not found: Error: Can’t resolve ‘core-js/fn/reflect’ in ‘E:MAMPhtdocsprojectappsrc’
resolve ‘core-js/fn/reflect’ in ‘E:MAMPhtdocsprojectappsrc’
Parsed request is a module
using description file: E:MAMPhtdocsprojectpackage.json (relative path: ./app/src)
Field ‘browser’ doesn’t contain a valid alias configuration
resolve as module
E:MAMPhtdocsprojectappsrcnode_modules doesn’t exist or is not a directory
E:MAMPhtdocsprojectappnode_modules doesn’t exist or is not a directory
E:MAMPhtdocsnode_modules doesn’t exist or is not a directory
E:MAMPnode_modules doesn’t exist or is not a directory
E:node_modules doesn’t exist or is not a directory
looking for modules in E:MAMPhtdocsprojectnode_modules
using description file: E:MAMPhtdocsprojectpackage.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
using description file: E:MAMPhtdocsprojectnode_modulescore-jspackage.json (relative path: ./fn/reflect)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect doesn’t exist
.wasm
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.wasm doesn’t exist
.mjs
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.mjs doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.json doesn’t exist
as directory
E:MAMPhtdocsprojectnode_modulescore-jsfnreflect doesn’t exist
[E:MAMPhtdocsprojectappsrcnode_modules]
[E:MAMPhtdocsprojectappnode_modules]
[E:MAMPhtdocsnode_modules]
[E:MAMPnode_modules]
[E:node_modules]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.wasm]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.mjs]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.js]
[E:MAMPhtdocsprojectnode_modulescore-jsfnreflect.json]
@ ./app/src/main.js 3:0-41
Details:
domainThrown: true

[10:49:27] ‘build’ errored after 4.02 s
[10:49:27] ‘default’ errored after 4.03 s

In going through and updating all the npm packages in a React application, I've encountered an error when performing a gulp build command from the terminal.
Unhandled rejection Error in plugin "webpack-stream"
Message: Module build failed
Error: Plugin/Preset files are not allowed to export objects, only functions.
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.
package.json file:
{
"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" && 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 > stats.json",
"profile-prod": "./node_modules/.bin/webpack --profile -p --progress --colors --display-error-details --json > 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": ""
}
gulpfile.babel.js
`
'use strict';
/// <binding BeforeBuild='build:jsx' AfterBuild='build' ProjectOpened='watch, build' />
/* 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 => {
console.log("Cleaning path :" + path);
del(path + '*').then(paths => {
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 --> CSS');
return gulp
.src(config.paths.scssSource)
.pipe($.changed(config.paths.webCss))
.pipe($.plumber({
errorHandler: $.notify.onError({
title: 'Gulp -- Build',
message: "Error: <%= error.message %>"
})
}))
.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,
() => {});
}
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));
}
`

I suspect the problem is that you have a mismatch between the version of Babel core and the Babel plugins/presets that you are using. You have #babel/core at major version 7 but all your plugins and presets at major version 6.
Update all your plugins and presets to major version 7. You can use babel-upgrade to help you.

Related

I have configured webpack-dev-server for a new React project. I am using babel-loader to transpile ES6 code. In previous projects we were able to detect obvious errors in our javascript code prior to transpilation, eg missing import statements or undefined variables.
Why is webpack / babel-loader not detecting obvious errors? And how can I configure babel-loader to not transpile these errors and instead log to the command prompt?
Here is my package.json
{
"name": "advent-calendar",
"version": "1.0.0",
"description": "",
"main": "src/entry.js",
"scripts": {
"dev": "webpack-dev-server --config config/webpack.config.dev.js",
"build:webpack": "cross-env NODE_ENV=production && webpack --config config/webpack.config.prod.js",
"build": "npm run build:webpack --verbose --color",
"test": "cross-env NODE_ENV=development ./node_modules/.bin/mocha --opts mocha.opts",
"test:watch": "npm run test -- --watch",
"lint": "npm run -s lint:css:raw ; npm run -s lint:js:raw",
"lint:css": "npm run -s lint:css:raw",
"lint:css:raw": "stylelint "src/**/*.{css,less,scss}"",
"lint:js": "npm run -s lint:js:raw",
"lint:js:raw": "eslint "src/**/*.js"",
"lint:js:raw:fix": "./node_modules/.bin/eslint --fix "src/**/*.js"",
"lint:js:watch": "esw "src/**/*.js" --watchyar",
"lint:watch": "npm run lint:js:watch"
},
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"chai": "^4.1.2",
"chai-enzyme": "^0.8.0",
"cross-env": "^5.1.1",
"css-loader": "^0.28.7",
"enzyme": "^3.1.1",
"enzyme-adapter-react-16": "^1.0.4",
"eslint": "^4.10.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-chai-friendly": "^0.4.0",
"eslint-plugin-eslint-comments": "^2.0.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"jsdom": "^9.9.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"mocha": "^4.0.1",
"node-sass": "^4.6.0",
"nyc": "~9.0.1",
"path": "^0.12.7",
"prop-types": "^15.6.0",
"sass-loader": "^6.0.6",
"simple-jsdom": "^3.0.0",
"sinon": "^4.1.2",
"sinon-chai": "^2.14.0",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"dependencies": {
"classnames": "^2.2.5",
"crypto-js": "^3.1.9-1",
"css-reset": "^0.0.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-transition-group": "^2.2.1",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-saga": "^0.16.0"
}
}
This is my .babelrc
{
"presets": [
"es2015",
"react",
"stage-1"
]
}
My loader for javascript files is
{
test: /.$|.js$|.jsx$/,
exclude: /node_modules/[^#]/,
use: [{
loader: 'babel-loader',
}],
}

And how can I configure babel-loader to not transpile these errors and instead log to the command prompt?
Webpack-dev-server has enough configuration for error logging, which can be provided in declarative mode.
Just use following script (name it run-dev.js and patch package.json respectively) for launching client part:
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import config from './webpack.dev.config';
const outputConfig = {
colors: true,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false
};
const clientCompiler = webpack(config);
const clientDevServer = new WebpackDevServer(clientCompiler, {
stats: outputConfig
});
clientDevServer.listen(3000, '127.0.0.1');
Then you can customize outputConfig object depend on requirements and verbose degree of output. Don't forget to turn on errors and errorDetails options, which will indicate chunks and source code lines with compile errors.
Read mode here https://webpack.js.org/configuration/stats/ about outputConfig configuration, including filter patter for error output, which can be used for excluding redundant logging in console.

I'm integrating jest into my nuxt application using vue-test-utils (following Edd Yerburgh's new book).
The test fails right out of the box with "SyntaxError: Unexpected token {". Similar code builds fine with nuxt and the tests ran with Ava. I'm assuming that I have a problem with my jest configuration.
I've included my package.json, code excerpt and console out.
Thanks for any help,
Dan
npm 6.4.0
package.json
{
"name": "cxl-ui-base",
"version": "1.0.0",
"description": "Base UI for SA and CXL",
"author": "Dan Mahoney <dan.mahoney#contextlabs.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test:coverage": "TEST=unit nyc --report-dir=generated-files/coverage ava --tap | tap-summary",
"test:unit": "NODE_ENV=testing jest --verbose --no-cache",
"test:watch": "NODE_ENV=pro ava --watch",
"lint": "eslint -f node_modules/eslint-detailed-reporter/lib/detailed.js --ext .js,.vue -o generated-files/lint.html .",
"doc": "jsdoc -c doc.conf.js"
},
"dependencies": {
"#nuxtjs/auth": "^4.5.1",
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/dotenv": "^1.1.1",
"ava-describe": "^2.0.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"dotenv": "^5.0.1",
"eslint-import-resolver-alias": "^1.1.1",
"express": "^4.16.3",
"jsdoc-vue": "^1.0.0",
"jsonwebtoken": "^8.2.1",
"leaflet": "^1.3.1",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"npm": "^6.4.0",
"nuxt": "1.4.1",
"nuxt-leaflet": "0.0.10",
"nuxt-material-design-icons": "^1.0.4",
"oauth-1.0a": "^2.2.4",
"vue": "^2.5.16",
"vue-d3": "^0.1.0",
"vue-i18n": "^7.6.0",
"vue-uuid": "^1.0.0",
"vue2-leaflet": "^1.0.2",
"vuelidate": "^0.7.2",
"vuetify": "^1.0.17",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.2",
"#vue/test-utils": "^1.0.0-beta.19",
"ajv": "^6.5.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.4.2",
"babel-plugin-add-module-exports": "^0.3.3",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"chromedriver": "^2.38.3",
"eslint": "^4.3.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-standard": "^10.2.1",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsdoc": "^3.7.1",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"eslint-plugin-vue-a11y": "0.0.26",
"jest": "^23.5.0",
"jest-vue-preprocessor": "^1.4.0",
"jsdoc": "^3.5.5",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"loglevel": "^1.6.1",
"nightwatch": "^0.9.21",
"npm-merge-driver": "^2.3.5",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^1.0.0",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue-jest": "^2.6.0",
"vue-loader": "^13.7.2",
"vue-meta": "^1.5.0",
"vue-template-compiler": "^2.5.16"
},
"jest": {
"transform": {
"^.+\.js$": "babel-jest",
"^.+\.vue$": "vue-jest"
}
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"jest": true
}
}
}
Code
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuetify from 'vuetify';
import test from 'jest';
import ClientMap from '#/components/Map'; // eslint-disable-line
import { commonAssertions } from '#/plugins/test.utils';
// for mocking
import modal from '#/components/Modal'; // eslint-disable-line
const localVue = createLocalVue();
localVue.use(Vuetify);
test('Sanity Test', () => {});
test('Initial State', (t) => {
const $modal = sinon.mock(modal);
const wrapper = shallowMount(Map, {
mocks: {
$modal,
},
localVue,
});
commonAssertions(Map, t, wrapper);
});
test.todo('Select Layer');
test.todo('Test Modal??');
test.todo('Test Tooltip??');
test.todo('UnSelect Layer');
Relevant Output
FAIL src/test/specs/map.spec.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/dan.mahoney/Projects/cxl-ui-base/src/test/specs/map.spec.js:10
import { shallowMount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.045s

The problem is that nuxt puts the babel config into nuxt.config.js. I found an npm package that solves that. It allows you to have a .babelrc file and have it injected into nuxt.config.js. When Jest compiles the files for testing, it uses .babelrc. Kudos to the author.

I created a project using the vue-cli with the web pack template.
My package.json looks like
{
"name": "vuejs-form-frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "karneaud <kendall.arneaud#gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --debug --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js",
"postinstall": "npm run start"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-form-wizard":"*"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"browser-sync":"*",
"browser-sync-webpack-plugin":"*",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Following which I ran the command npm run dev which ran the command webpack-dev-server --debug --inline --progress --config build/webpack.dev.conf.js
my web pack.dev.conf.js looks like this
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
disableHostCheck: true
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
// ,
// new BrowserSyncPlugin({
// // browse to http://localhost:3000/ during development,
// // ./public directory is being served
// host: 'localhost',
// port: 3000,
// proxy: 'http://localhost:8000/'
// },{
// open: false
// })
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
and the output looks like this
15% building modules 47/47 modules 0 active
71% sealing 72% optimizing
73% basic module optimization
74% module
optimization 75% advanced module optimization
76% basic chunk optimization
77% chunk optimization 78% advanced chunk
optimizationO2018-05-04T02:09:58.695167757Z ERROR Failed to
compile with 1 errors
What gives with this error? Is this VueJS or Webpack ?

I'm getting this error with these configurations, at:
at Resolver.resolveModule
(node_modules/jest-resolve/build/index.js:194:17)
node -v = v8.9.4
webpack.config.js
var webpack = require('webpack');
module.exports = {
module: {
loaders: [
{exclude: ['node_modules'], loader: 'babel', test: /.jsx?$/},
{loader: 'style-loader!css-loader', test: /.css$/},
{loader: 'url-loader', test: /.gif$/},
{loader: 'file-loader', test: /.(ttf|eot|svg)$/},
],
},
resolve: {
extensions: ['', 'js', 'jsx'],
modules: [
'node_modules',
'bower_components',
'shared',
'/shared/vendor/modules',
],
},
};
Package json:
{
"name": "frontend",
"jestWebpackResolver": {
"silent": true,
"webpackConfig": "./tests/webpack.config.js"
},
"private": true,
"version": "3.0.0-alpha.1",
"description": "Zaask FrontEnd",
"main": "src/app/index.js",
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/app/index.html ./dist && copyfiles -u 1 "./src/assets/**" ./dist",
"dist": "npm run clean && npm run copy && webpack --progress --bail --env dist -p",
"lint": "./node_modules/.bin/eslint ./src/app/",
"serve:dev": "webpack-dev-server --env dev",
"serve:dist": "webpack-dev-server --env dist -p --progress",
"start": "npm run serve:dev",
"test": "NODE_ENV=dev jest --no-cache"
},
"repository": "",
"author": "Carlos Vieira",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "~6.4.0",
"babel-polyfill": "~6.23.0",
"babel-preset-es2015": "~6.24.0",
"babel-preset-react": "~6.24.0",
"babel-preset-stage-2": "~6.24.0",
"copy-webpack-plugin": "^4.0.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.26.4",
"eslint": "^4.0.0",
"eslint-plugin-react": "^7.0.0",
"file-loader": "^0.9.0",
"jest": "^22.4.0",
"jquery": "^3.3.1",
"resolve-url-loader": "^2.2.1",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.3",
"source-map-loader": "^0.2.1",
"style-loader": "^0.13.2",
"tether": "^1.4.3",
"url-loader": "^0.5.9",
"webpack-dev-server": "~2.4.0"
},
"dependencies": {
"ajv": "^6.1.1",
"autoprefixer": "^7.2.3",
"axios": "^0.18.0",
"babel-jest": "^22.4.0",
"bootstrap": "^4.0.0",
"child_process": "^1.0.2",
"cssnano": "^3.10.0",
"extract-text-webpack-plugin": "^3.0.2",
"fs": "0.0.1-security",
"jest-webpack-alias": "^3.3.3",
"jest-webpack-resolver": "^0.2.0",
"js-cookie": "~2.1.0",
"jsdom": "^11.6.2",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"location": "0.0.1",
"navigator": "^1.0.1",
"node-sass": "^3.13.1",
"normalize-scss": "~7.0.0",
"popper.js": "^1.12.9",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.9",
"precss": "^2.0.0",
"prop-types": "~15.5.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "~5.0.0",
"react-router": "~4.1.0",
"react-router-dom": "~4.1.0",
"react-transition-group": "~1.1.0",
"redux": "~3.6.0",
"redux-thunk": "~2.2.0",
"regenerator-runtime": "^0.11.1",
"resolve": "^1.5.0",
"sugarss": "^1.0.1",
"utils": "^0.3.1",
"webpack": "^3.11.0"
},
"jest": {
"haste": {
"providesModuleNodeModules": [
"node_modules"
]
},
"moduleDirectories": [
"node_modules"
],
"transform": {
".*": "./tests/preprocessor.js"
},
"modulePaths": [
"src"
],
"resolver": "jest-webpack-resolver",
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/vendor/**"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/"
]
}
}
preprocessor.js
var babelJest = require('babel-jest');
require('babel-register'); // support ES6 'import' statements
var webpackAlias = require('jest-webpack-alias');
module.exports = {
process: function(src, filename, ...rest) {
if (filename.indexOf('node_modules') === -1) {
src = babelJest.process(src, filename, ...rest);
src = webpackAlias.process(src, filename, ...rest);
}
return src;
}
};
please I need some help
I already tried to remove all node modules and install with yarn or npm
thanks in advance
carlos vieira
I already remove node modules and upgrade jest to 22 version
and applied yarn install but still same error.

Copy from jest issues
I found the issue. I removed "js" as a file extension from the Jest config as I only have "ts" files. You cannot do that. Adding "js" again solves the problem for me.
Please try to add following lines in your package.json.
"jest": {
"moduleFileExtensions": [
"ts",
"js"
]
}

I am having issue in my angular app to include ng2-boostrap. I am constently receiving this error in chrome console:
GET http://127.0.0.1:8000/ng/node_modules/ng2-bootstrap/dropdown.js 404 (Not Found)
Looking at how the ng2-bootstrap module is stored in my directory, it seems to me that zone.js should be trying to load this module instead:
http://127.0.0.1:8000/ng/node_modules/ng2-bootstrap/dropdown/dropdown.module.js
Here's my app.module.ts import:
import { DropdownModule, TabsModule } from 'ng2-bootstrap';
/* Stuff */
And my systemjs.config
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
var map = {
'app': 'app', // 'dist',
'#angular': 'npm:#angular',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'rxjs': 'npm:rxjs',
// ng2-bootstrap
'moment': 'npm:moment',
'ng2-bootstrap': 'npm:ng2-bootstrap',
'ng2-charts': 'npm:ng2-charts',
};
var packages = {
'app': { main: './app/main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
// ng2-bootstrap
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
'ng2-charts': {
main: 'bundles/ng2-charts.umd.js',
defaultExtension: 'js'
}
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
baseURL: '/ng/',
map: map,
packages: packages
};
System.config(config);
})(this);
And my package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently "tsc -w" "lite-server" ",
"e2e": "tsc && concurrently "http-server -s" "protractor protractor.config.js" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"pree2e": "webdriver-manager update",
"test": "tsc && concurrently "tsc -w" "karma start karma.conf.js"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#angular/common": "2.4.3",
"#angular/compiler": "2.4.3",
"#angular/core": "2.4.3",
"#angular/forms": "2.4.3",
"#angular/http": "2.4.3",
"#angular/platform-browser": "2.4.3",
"#angular/platform-browser-dynamic": "2.4.3",
"#angular/router": "3.4.3",
"#types/lodash": "4.14.50",
"angular-calendar": "0.6.2",
"angular-in-memory-web-api": "~0.2.4",
"angular2-datatable": "0.5.2",
"angular2-ladda": "^1.0.6",
"angular2-moment": "^1.1.0",
"angular2-toaster": "2.0.0",
"chart.js": "^2.3.0",
"core-js": "^2.4.0",
"dragula": "^3.7.2",
"moment": "2.17.1",
"ng2-bootstrap": "^1.3.2",
"ng2-charts": "^1.5.0",
"ng2-dragula": "1.3.0",
"ng2-select": "^1.2.0",
"reflect-metadata": "0.1.9",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.7.4"
},
"devDependencies": {
"concurrently": "^3.1.0",
"lite-server": "^2.2.2",
"typescript": "~2.0.10",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"#types/node": "^6.0.46",
"#types/jasmine": "^2.5.36"
},
"repository": {}
}
Do you have any idea why ng2-bootstrap dropdown isn't loading?

I found the problem in my solution. We were integrating a layout and some components had their imports written as:
import { DropdownModule } from 'ng2-bootstrap/dropdown';
So we changed them to:
import { DropdownModule } from 'ng2-bootstrap';
And it did fix the issues!