Cannot configure webpack 2.2.1 correctly, keep throwing WebpackOptionsValidationError

Do you want to request a feature or report a bug?
a bug

What is the current behavior?
I used webpack@2.1.0-beta.22 and webpack-dev-server@2.1.0-beta.10 before, and it worked fine. The configuration is:

//webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
     entry: ['redux-exercise.js',
               'webpack/hot/dev-server', 
               'webpack-dev-server/client?http://localhost:9090/'],
     output: {
                path: path.join(__dirname, './dist'),
                filename: 'bundle.js'
               },
      module: {
                  loaders: [
                      {
                         test: /\.jsx?$/,
                         exclude: /node_modules/,
                         loaders: ['react-hot']
                       },
                       {
                         test: /\.jsx?$/,
                         loaders: ['babel-loader'],
                         exclude: /node-modules/,
                         query: {
                             presets: ['react', 'es2015', 'stage-0']
                            }

                          }

                   ],
                   resolve: {
                           extensions: ['', '.js', '.jsx', '.css'],
                           modulesDirectories: [
                           'node_modules'
                   ]

                    }
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin()]

}

and I also used dev-server:

//dev-server.js

var WebpackDevServer = require('webpack-dev-server');
var webpack = require('webpack');
var config = require('./webpack.config.js');
var path = require('path');

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    hot: true,
    filename: config.output.filename,
    publicPath: config.output.publicPath,
    stats: {
        colors: true
    }
});

server.listen(9090, 'localhost', function() {});

so the files above are what I used before.

However, I try to update my webpack to 2.2, my new configuration like this:

var path = require('path');
var webpack = require('webpack');


module.exports = {
    entry: ['redux-exercise.js',
                'webpack/hot/dev-server', 
                'webpack-dev-server/client?http://localhost:9090/'],
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: 
    {
            rules: [
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: ['react-hot']
            },
            {
                test: /\.jsx?$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/,
                options: {
                    presets: ['react', 'es2015', 'stage-0',{"modules": false}]
                }
            }
            
        ],
        resolve: {
            extensions: ['', '.js', '.jsx'],
            modules: [
                'node_modules'
            ]
        }
    },
    plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin()]
}

the dev-server.js is the same, but when I do npm run dev , it keeps throwing new WebpackOptionsValidationError.

What is the expected behavior?
I expect to run the dev-server for my react program, and run with hot-rolader

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
My Environment:

Node.js: 7.5
system: unbuntu 14.04

package.json:

{
  "name": "exercise-react-redux",
  "version": "0.1.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "node dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-redux": "5.0.2",
    "redux": "3.6.0",
    "redux-thunk": "2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "jsx-loader": "^0.13.2",
    "react-hot-loader": "^1.3.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

Author: Fantashit

2 thoughts on “Cannot configure webpack 2.2.1 correctly, keep throwing WebpackOptionsValidationError

  1. resolve.extensions should not have an empty string as item.

    But I wonder why the validation error has no message it it…

  2. Thanks @sokra , besides need to fix resolve: { extensions: ['.js', '.jsx'], modules: ['node_modules']}, I also need to put the whole resolve part out of module. So the correct configuration for it should be:

    var path = require('path');
    var webpack = require('webpack');
    
    
    module.exports = {
        entry: ['redux-exercise.js',
                    'webpack/hot/dev-server', 
                    'webpack-dev-server/client?http://localhost:9090/'],
        output: {
            path: path.join(__dirname, './dist'),
            filename: 'bundle.js'
        },
        module: 
        {
                rules: [
                {
                    test:/\.jsx?$/,
                    exclude: /node_modules/,
                    use: ['react-hot']
                },
                {
                    test: /\.jsx?$/,
                    loaders: ['babel-loader'],
                    exclude: /node_modules/,
                    options: {
                        presets: ['react', 'es2015', 'stage-0'] //**Change
                    }
                }
                
            ]
        },
      //**Change
        resolve: {
                extensions: ['.js', '.jsx'], //**Change
                modules: [
                    'node_modules'
                ]
            },
        plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin()]
    }
    
    

    Thanks for you guys hard working and patient again!

Comments are closed.