Rahul Dagli Rahul Dagli - 5 months ago 172
React JSX Question

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

The error appeared after I added 'react-hot' loader in array. I've followed this tutorials: https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement however, 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');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
entry: [
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()


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']