ConcurrentCompilationError: You ran Webpack twice.

[Bobz-zg]

webpack.config.js

'use strict'; // eslint-disable-line

const path = require('path');
const config = require('./config');

const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browsersync-webpack-plugin');

const target = process.env.DEVURL || config.devUrl;
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';

/**
 * Modules
 */
const loadModules = {
  rules: [
  {
    enforce: 'pre',
    test: /\.js?$/,
    include: config.paths.assets,
    use: 'eslint',
  },
  {
    enforce: 'pre',
    test: /\.(js|s?[ca]ss)$/,
    include: config.paths.assets,
    loader: 'import-glob',
  },
  {
    test: /\.js$/,
    exclude: [/(node_modules|lib|vendor)/],
    include: config.paths.assets,
    use: {
      loader: 'babel-loader'
    }
  },
  {
    test: /\.css$/,
    include: config.paths.assets,
    use: [
      'cache',
      config.env.production ? MiniCssExtractPlugin.loader: 'style-loader',
      { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
      {
        loader: 'postcss', options: {
          config: { path: __dirname, ctx: config },
          sourceMap: config.enabled.sourceMaps,
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    include: config.paths.assets,
    use: [
      config.env.production ? MiniCssExtractPlugin.loader: 'style-loader',
      { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
      {
        loader: 'postcss', options: {
          config: { path: __dirname, ctx: config },
          sourceMap: config.enabled.sourceMaps,
        },
      },
      { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
      'sass',
      'import-glob',
    ],
  },
  {
    test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
    use: [
      {
        loader: 'file',
        options: {
          name: `[path]${assetsFilenames}.[ext]`,
          publicPath: '../',
        },
      }
    ],
  }],
}

/**
 * Plugins
 **/
const loadPlugins = [

  new CleanWebpackPlugin([config.paths.dist], {
    root: config.paths.root,
    verbose: false,
  }),

  new MiniCssExtractPlugin({
    filename: `styles/${assetsFilenames}.css`,
  }),

  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify( config.mode )
    }
  }),

  new FriendlyErrorsWebpackPlugin(),
];

/**
 * Final config
 */
let webpackConfig = {
  context: config.paths.assets,
  entry: config.entry,
  mode: config.mode,
  devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
  output: {
    path: config.paths.dist,
    publicPath: config.publicPath,
    filename: `scripts/${assetsFilenames}.js`,
  },

  stats: {
    hash: false,
    version: false,
    timings: false,
    children: false,
    errors: true,
    errorDetails: true,
    warnings: true,
    chunks: false,
    modules: false,
    reasons: true,
    source: false,
    publicPath: false,
  },

  module: loadModules,

  resolve: {
    modules: [
      config.paths.assets,
      'node_modules',
    ],
    enforceExtension: false,
  },

  resolveLoader: {
    moduleExtensions: ['-loader'],
  },

  plugins: loadPlugins,
}

/**
 * Watch
 */
if (config.enabled.watcher) {

  webpackConfig.stats = false;
  webpackConfig.devtool =  '#cheap-module-source-map';

  webpackConfig.plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
    }),
  );
}

/**
 * Export final config
 */
module.exports = webpackConfig;

package.json

{
  "dependencies": {
    "autoprefixer": "^8.4.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "browser-sync": "^2.24.4",
    "browser-sync-webpack-plugin": "^2.2.2",
    "browsersync-webpack-plugin": "^0.6.0",
    "cache-loader": "^1.2.2",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "cssnano": "^3.10.0",
    "eslint": "^4.19.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.11.0",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "imagemin-mozjpeg": "^7.0.0",
    "imagemin-webpack-plugin": "^2.1.1",
    "import-glob": "^1.5.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.4",
    "postcss-safe-parser": "^3.0.1",
    "resolve-url-loader": "^2.3.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.7.0",
    "webpack-assets-manifest": "^3.0.1",
    "webpack-cli": "^2.1.3",
    "webpack-hot-middleware": "^2.22.1",
    "webpack-merge": "^4.1.2",
    "yargs": "^11.0.0"
  },
  "devDependencies": {
    "breakpoint-sass": "^2.7.1",
    "normalize.css": "^8.0.0",
    "parsleyjs": "^2.8.1",
    "susy": "^3.0.5"
  }
}

[ajcsilva]

@Bobz-zg Did you find any solution to this? Currently struggling with this error.

[Bobz-zg]

@ajisilva I have rewritten the script from scratch and somehow things got fixed by them self. So unfortunately I don't have other exact answer to this problem.

[weilinzung]

@Bobz-zg You use browsersync-webpack-plugin, but this is browser-sync-webpack-plugin.

Sage WordPress use older webpack version.

[Va1]

the above answer is the clue, i believe. thanks everyone and sorry for delay. cheers