Webpack - Error: Unable to define "request" and multiple loaders in the list of loaders

Question

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

I get an Error: Cannot define 'query' and multiple loaders in loaders list message 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

The query appears to be an alternative way to customize the behavior of a single bootloader, which is cleaner than specifying these inline parameters (see below). If multiple loaders are present, Webpack does not know which query configuration is applied.

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:. Although this solution works for Webpack 1, see other answers for cleaner solutions that work in later versions.

Answer 2

My decision:

 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/ } 

Answer 3

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

Loaders can be passed to an array of loader objects. Each loader object can specify an options object, which acts as a webpack 1 query for this particular loader.

For example, using 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 throughout the chain.

Also note that I changed the es2015 to es2015-native-modules in the babel-loader setup. This has nothing to do with the options specification, it's just that, including the es6 modules, you can use the webpack tree insert function introduced in v2. It can be left alone, and it will still work, but the answer will seem incomplete without indicating an obvious update :-)

---

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

---

Answer 4

For webpack 2 . I manage to configure as follows:

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

Answer 5

This solution worked for me:

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

and presets in .babelrc

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

refer to https://webpack.imtqy.com/docs/usage.html

Answer 6

I ran into the same problem since I found a solution for myself. you can try:

--- here is the solution ---

If you defined “presets” in the “.babelrc” file, you do not need to specify it in the “webpack.config.js” file, then delete it and it will work fine

---

and if you do not, I recommend that you go to the ".babelrc" file and specify your presets there