Webpack 2 error: Cannot read property 'plugin' of null

Question

I'm new to webpack, so I'm trying to create configuartion that suites to my needs from the scratch. It looks completely fine for me but when I'm running webpack-dev-server command I got error:

D:\Dev\agromash.UI>npm run dev

> agromash.ui@0.0.1 dev D:\Dev\agromash.UI
> webpack-dev-server

D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:341
                throw e;
                ^

TypeError: Cannot read property 'plugin' of null
    at NpmInstallPlugin.apply (D:\Dev\agromash.UI\node_modules\npm-install-webpack-plugin\src\plugin.js:50:28)
    at Compiler.apply (D:\Dev\agromash.UI\node_modules\tapable\lib\Tapable.js:306:16)
    at webpack (D:\Dev\agromash.UI\node_modules\webpack\lib\webpack.js:32:19)
    at startDevServer (D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:335:14)
    at processOptions (D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:318:3)
    at Object.<anonymous> (D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:419:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Here is my webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
if (process.env.NODE_ENV === 'production') {
  plugins.push(
    new CleanWebpackPlugin([ 'public/assets/' ], {
      root: __dirname,
      verbose: true,
      dry: false
    })
  );
  plugins.push(new webpack.optimize.DedupePlugin());
  plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = {
    entry: ['babel-polyfill', "./src/index.js"],
    output: {
        path: path.resolve(__dirname, "public"), // string
        filename: "bundle.js",
        publicPath: "/assets/"
    },
    module: {
        rules: [{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader'
                })
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader!less-loader'
                })
            },
            {
                test: /\.gif$/,
                loader: 'url-loader?limit=10000&mimetype=image/gif'
            },
            {
                test: /\.jpg$/,
                loader: 'url-loader?limit=10000&mimetype=image/jpg'
            },
            {
                test: /\.png$/,
                loader: 'url-loader?limit=10000&mimetype=image/png'
            },
            {
                test: /\.svg/,
                loader: 'url-loader?limit=26000&mimetype=image/svg+xml'
            },
            {
                test: /\.(woff|woff2|ttf|eot)/,
                loader: 'url-loader?limit=1'
            },
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: [/node_modules/, /public/]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                enforce: 'pre',
                test: /\.html/,
                loader: 'htmlhint',
                exclude: /node_modules/
            },
        ]
    },
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, "src")
        ],
        extensions: [".js", ".json", ".jsx", ".css", ".less"]
    },
    performance: {
        hints: "warning", // enum
        maxAssetSize: 200000, // int (in bytes),
        maxEntrypointSize: 400000, // int (in bytes)
        assetFilter: function(assetFilename) {
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
    devtool: process.env.NODE_ENV !== 'production' ? 'eval-source-map' : null,
    context: __dirname, // string (absolute path!)
    target: "web", // enum
    stats: {
        assets: true,
        assetsSort: "field",
        cached: true,
        chunks: true,
        chunkModules: true,
        chunkOrigins: true,
        chunksSort: "field",
        context: "../src/",
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true,
        modules: true,
        modulesSort: "field",
        publicPath: true,
        reasons: true,
        source: true,
        timings: true,
        warnings: true
    },
    devServer: {
        contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")],
        compress: true,
        port: 3000,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        overlay: {
            warnings: true,
            errors: true
        },
        port: 3000,
        watchContentBase: true,
        publicPath: "assets"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor-[hash].min.js',
        }),
        new ExtractTextPlugin("styles.css"),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: false,
            }
        }),
        /*new CleanWebpackPlugin(['public/assets'], {
            root: path.resolve(__dirname, "./"),
            verbose: true,
            dry: false
        }),*/
        new DashboardPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new NpmInstallPlugin({
            dev: false,
            peerDependencies: true,
            quiet: false,
        })
    ]
}

Answer 1

You can try to use npm-install-webpack2-plugin

These are the draft release notes:

• Added a quiet option - enabling it will silence npm install output.
• Check if modules are resolvable from the current working directory instead of checking dependencies and devDependencies in package.json . package.json is now optional - the plugin will no longer create it if it doesn't exist.
• If package.json exists, the plugin will --save newly-installed dependencies to it as usual.
• Allow Webpack to attempt to resolve loaders first, as module.resolveLoaders configuration may enable resolving of loaders which aren't resolvable from the current working directory.
• Added support for Babel presets specified as a [preset, options] array.
• Added compatibility for Webpack 2 creating resolvers later in the process.

Answer 2

It seems that it is a known issue with NpmInstallPlugin. You may want to remove the plugin until it gets fixed.