Webpack - Error: Cannot define 'query' and multiple loaders in loaders list

Question

This error appeared after I added the react-hot loader in an array following this tutorial: https://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement

I'm getting Error: Cannot define 'query' and multiple loaders in loaders list.

var WebpackDevServer = require("webpack-dev-server"); var webpack = require('webpack'); var path = require('path'); require("babel-polyfill");  var BUILD_DIR = path.resolve(__dirname, 'build'); var APP_DIR = path.resolve(__dirname, 'src');  module.exports = {   entry: [     'babel-polyfill',     'bootstrap-loader',     'webpack/hot/dev-server',     APP_DIR + '/import.js',   ],   output: {     path: BUILD_DIR,     filename: 'bundle.js'   },   module: {     loaders: [{       test: /\.jsx?$/,       loaders: ['react-hot', 'babel'],       exclude: /node_modules/,       query: {         plugins: ['transform-runtime'],         presets: ['es2015', 'stage-0', 'react']       }     }, {       test: /\.css$/,       loader: "style-loader!css-loader"     }, {       test: /\.scss$/,       loaders: ["style", "css", "sass"]     }, {       test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,       loader: 'url-loader?limit=100000'     }]   },   plugins: [     new webpack.ProvidePlugin({       $: "jquery",       jQuery: "jquery"     }),     new webpack.HotModuleReplacementPlugin(),     new webpack.NoErrorsPlugin()   ] }; 

Answer 1

It seems that the query is an alternative way of customizing the behaviour of a single loader, that is cleaner than specifying those parameters inline (see below). If multiple loaders are present, Webpack does not know to which the query configuration applies.

The following should solve your problem:

module: {     loaders: [{         test: /\.jsx?$/,         exclude: /node_modules/,         loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime']     } 

---

EDIT: While this solution works for Webpack 1, see the other answers for cleaner solutions that work in more recent versions.