Rahul Dagli Rahul Dagli - 1 year ago 308
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()

Answer Source

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']
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download