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()
  ]
};

Shoal

Possible duplicate of How to add a query to a webpack loader with multiple loaders? – Konstantine

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.

Convolvulus

For complicated query, use webpack-combine-loaders. – Tittivate

Answer 2

My Solution:

loaders: [{
  test: /\.(js|jsx)$/,
  loaders: ['react-hot', 'babel?' + JSON.stringify({
    cacheDirectory: true,
    plugins: [
      'transform-runtime',
      'transform-decorators-legacy'
    ],
    presets: ['es2015', 'react', 'stage-0'],
    env: {
      production: {
        presets: ['react-optimize']
      }
    }
  }), 'eslint'],
  include: src,
  exclude: /node_modules/
}

Mod

I like the idea of JSON.stringify :) – Panjandrum

Answer 3

In webpack 2 & 3 this can be configured much more cleanly.

Loaders can be passed in an array of loader objects. Each loader object can specify an options object that acts like the webpack 1 query for that particular loader.

For example, using both react-hot-loader and babel-loader, with babel-loader configured with some options, in webpack 2/3

module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
      loader: 'react-hot-loader'
    }, {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        presets: [
          'es2015-native-modules'
          'stage-0',
          'react'
        ]
      }
    }]
  }] 
}

For comparison, here is the same configuration in webpack 1, using the query string method.

module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
      'react-hot',
      'babel-loader?' +
        'babelrc=false,' +
        'presets[]=es2015,' +
        'presets[]=stage-0,' +
        'presets[]=react'
      ]
  }] 
}

Notice the changed property names all down the chain.

Also, note that I changed the es2015 preset to es2015-native-modules preset in the babel-loader configuration. This has nothing to do with the specification of options, it's just that including es6 modules allows you to use webpack tree-shaking feature introduced in v2. It could be left alone and it would still work, but the answer would feel incomplete without that obvious upgrade being pointed out :-)

---

Disclaimer: This is the same as my answer to a similar question, but this question has similar votes/views/google ranking, so I'll post the answer here too.

---

Supercilious

Answer 4

For webpack 2. I manage to configure like this:

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

    module.exports = {
        entry: "./src/index.js",
        output: {
            path: path.resolve(__dirname, "dist/assets"),
            filename: "bundle.js",
            publicPath: "/assets/"
        },
        devServer: {
            inline: true,
            contentBase: './dist',
            port: 3000
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    loader: "babel-loader",
                    options: {
                        presets: ['latest', 'react', 'stage-0']
                    }
                }
            ]
        }
    };

Tourmaline

Answer 5

This solution worked for me:

module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader'
            }
        ]
    }

and presets in the .babelrc

{
    'presets': ['latest', 'react', 'stage-0']
}

please refer to https://webpack.github.io/docs/usage.html

Mercymerdith

Answer 6

I had faced the same issue since I found a solution for myself. you can try it:

--- here is the solution ---

If you've defined "presets" in ".babelrc" file then you don't need to specify it in the "webpack.config.js" file, then delete it and it works well

---

and if you don't, I recommend you to go to your ".babelrc" file and specify your presets there

Bridgid