Error when use with grunt-webpack

[leosuncin]

Issue description

I am using grunt to run webpack-dev-server and build webpack modules, but when run grunt default task it fails, I use inspect-process to debug the issue and found this.activeLevels.has is not a function, more exactly the error occurs with webpack-dev-server task

Technical info

• Webpack Bundle Analyzer version: 2.1.1
• Webpack version: 1.13.3
• Grunt version: 1.0.1
• Grunt-webpack version: 1.0.18
• Node.js version: 7.2.1
• npm/yarn version: 4.0.3 / 0.16.1
• OS: Manjaro GNU/Linux

Debug info

inspect --debug-exception grunt

Stacktrace

TypeError: this.activeLevels.has is not a function
  at Object.Logger.(anonymous function) [as info] (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/Logger.js:70:27)
  at Object.generateStatsFile (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:90:17)
  at /home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:49:24
  at /home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:72:20
  at Array.forEach (native)
  at Immediate.<anonymous> (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:71:19)
  at runCallback (timers.js:649:20)
  at tryOnImmediate (timers.js:622:5)
  at processImmediate [as _immediateCallback] (timers.js:594:5)

My webpack.config.js

'use strict'

const resolve = require('path').resolve
const webpack = require('webpack')
const merge = require('webpack-merge')
const VisualizerPlugin = require('webpack-visualizer-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
const PORT = process.env.WEBPACK_PORT || 1635

const common = {
  entry: {
    dependencies: [],
    dashboard: 'js/dashboard',
    mobile: 'js/mobile',
    main: [
      'babel-polyfill',
      'js/main.js',
    ],
  },
  output: {
    path: resolve('.tmp/public'),
    filename: 'js/[name].js',
    publicPath: '/',
  },
  target: 'web',
  context: resolve('assets'),
  resolve: {
    extensions: ['', '.js', '.scss', '.less', '.css', '.html', '.json'],
    root: [
      resolve('assets'),
      resolve('node_modules'),
      resolve('bower_components'),
    ],
    moduleDirectories: ['node_modules', 'bower_components'],
  },
  plugins: [
    new StyleLintPlugin({
      files: 'styles/**/*.{css,sass,scss,sss}',
    }),
    new VisualizerPlugin({filename: 'webpack-stats.html'}),
    new ExtractTextPlugin('production' === process.env.NODE_ENV ?
      'min/[name]-[chunkhash].min.css' : 'styles/[name].css'
    ),
    new BundleAnalyzerPlugin({
      analyzerMode: 'server', // 'static',
      reportFilename: resolve('.tmp/public/report.html'),
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: resolve('.tmp/public/stats.json'),
      logLevel: 'silent',
    }),
  ],
  failOnError: true,
  module: {
    preLoaders: [
      {
        test: /\.js$/i,
        loader: 'eslint',
        exclude: /(node_modules|bower_components)/,
      }, {
        test: /\.(jpg|jpeg|png|gif|svg)$/i,
        loader: 'image-webpack',
        query: {
          bypassOnDebug: true,
        },
      },
    ],
    loaders: [
      {
        test: /\.js$/i,
        loader: 'babel',
        exclude: /node_modules/,
      }, {
        test: /\.css$/i,
        loader: ExtractTextPlugin.extract([
          'css?sourceMap&importLoaders=1',
          'postcss?sourceMap',
        ]),
      }, {
        test: /\.less$/i,
        loader: ExtractTextPlugin.extract([
          'css?sourceMap&importLoaders=1',
          'postcss',
          'less?sourceMap',
        ]),
      }, {
        test: /\.s[ac]ss$/i,
        loader: ExtractTextPlugin.extract([
          'css?sourceMap&importLoaders=1',
          'postcss',
          'sass?sourceMap',
        ]),
      }, {
        test: /\.html$/i,
        loader: 'html',
      }, {
        test: /\.(jpg|jpeg|webp|png|gif)$/i,
        loader: 'file',
        query: {
          name: 'images/[name].[ext]',
        },
      }, {
        test: /\.svg/i,
        loader: 'svg-url',
        query: {
          limit: 20480,
        },
      }, {
        test: /\.woff(\?v=\d+(\.\d+\.\d+)?)?$/i,
        loader: 'url',
        query: {
          mimetype: 'application/font-woff',
          name: 'fonts/[name].[ext]',
        },
      }, {
        test: /\.woff2(\?v=\d+(\.\d+\.\d+)?)?$/i,
        loader: 'url',
        query: {
          mimetype: 'application/font-woff2',
          name: 'fonts/[name].[ext]',
        },
      }, {
        test: /\.[ot]tf(\?v=\d+(\.\d+\.\d+)?)?$/,
        loader: 'url',
        query: {
          mimetype: 'application/octet-stream',
          name: 'fonts/[name].[ext]',
        },
      }, {
        test: /\.eot(\?v=\d+(\.\d+\.\d+)?)?$/i,
        loader: 'url',
        query: {
          mimetype: 'application/vnd.ms-fontobject',
          name: 'fonts/[name].[ext]',
        },
      }, {
        test: /\.svg(\?v=\d+(\.\d+\.\d+)?)?$/i,
        loader: 'url',
        query: {
          mimetype: 'image/svg+xml',
          name: 'fonts/[name].[ext]',
        },
      },
    ],
  },
}

const dev = {
  entry: {
    main: [
      'webpack/hot/dev-server',
      `webpack-dev-server/client?http://0.0.0.0:${PORT}/`,
      'babel-polyfill',
      resolve('assets/js/main.js'),
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'PRODUCTION': false,
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
    new webpack.HotModuleReplacementPlugin({
      multiStep: true,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'js/common.js',
    }),
  ],
  debug: true,
  devtool: 'source-map',
  stats: {
    errorDetails: true,
    colors: true,
    modules: true,
    reasons: true,
  },
}

const dist = {
  output: {
    filename: 'min/[name]-[chunkhash].min.js',
    chunkFilename: '[chunkhash].js',
  },
  plugins: [
    new webpack.DefinePlugin({
      'PRODUCTION': false,
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'min/common-[chunkhash].min.js',
    }),
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,
      },
      compress: {
        drop_console: true, /* eslint camelcase: off */
      },
    }),
  ],
}

module.exports = merge.smart(common,
  'production' === process.env.NODE_ENV ? dist : dev
)

My grunt task for webpack

module.exports = function(grunt) {
  const config = require('../../webpack.config')
  const PORT = process.env.WEBPACK_PORT || 1635

  grunt.config.set('webpack', {
    build: config,
  })

  config.plugins = config.plugins.filter(plugin =>
    !(plugin instanceof require('webpack-visualizer-plugin'))
  )

  grunt.config.set('webpack-dev-server', {
    options: {
      contentBase: '.tmp/public',
      // https: true,
      historyApiFallback: true,
      port: PORT,
      host: '0.0.0.0',
      hot: true,
      inline: true,
      open: true,
      proxy: {
        '*': {
          target: 'http://localhost:1337',
        },
      },
      webpack: config,
    },
    start: {
      failOnError: false,
      progress: false,
      watch: true,
      watchOptions: {
        aggregateTimeout: 500,
        poll: true,
      },
      keepalive: true,
      stats: 'errors-only',
    },
  })

  grunt.loadNpmTasks('grunt-webpack')
}

[valscion]

Does this same thing happen if you change the logLevel from the BundleAnalyzerPluginconfiguration to something else than silent? Try out info for example.

[leosuncin]

Change logLevel to info and got a new error "this.activeLevels.has is not a function"

TypeError: this.activeLevels.has is not a function
  at Object.Logger.(anonymous function) [as info] (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/Logger.js:70:27)
  at Object.generateStatsFile (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:90:17)
  at /home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:49:24
  at /home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:72:20
  at Array.forEach (native)
  at Immediate.<anonymous> (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:71:19)
  at runCallback (timers.js:651:20)
  at tryOnImmediate (timers.js:624:5)
  at processImmediate [as _immediateCallback] (timers.js:596:5)

Options passed to BundleAnalyzerPlugin

Call stack and scope for the error

[valscion]

I'm sorry but it seems that the screenshot of call stack and scope for the error is missing?

[valscion]

Can you set a breakpoint on line 70 in

/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/Logger.js

and take a screenshot, what does this contain and what does this.logLevel contain?

[leosuncin]

TypeError: this.activeLevels.has is not a function
  at Object.Logger.(anonymous function) [as info] (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/Logger.js:70:27)
  at Object.generateStatsFile (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:90:17)
  at /home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:49:24
  at /home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:72:20
  at Array.forEach (native)
  at Immediate.<anonymous> (/home/leosuncin/Workspaces/TadeoSystems/pet-retail/node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js:71:19)
  at runCallback (timers.js:651:20)
  at tryOnImmediate (timers.js:624:5)
  at processImmediate [as _immediateCallback] (timers.js:596:5)

[valscion]

Huh, that's weird. The this.activeLevels seems to be just an empty object and not a Set as it was in your previous screenshot #34 (comment)

There does seem to be some sort of a bug. Are you able to provide a minimal repository for your issue, @leosuncin, that I could run to get the same error myself? Without that, we can only rely on guessing why things are not working.

[th0r]

Here is the similar issue: #36
The bug was in webpack-merge.
Maybe grunt-webpack uses it?

[th0r]

@leosuncin Do you still have this issue?