Cannot define 'query' and multiple loaders in loaders list, webpack error

Question

I am getting this error

/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:54
            if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");
                                                                    ^

Error: Cannot define 'query' and multiple loaders in loaders list
at getLoadersFromObject (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:54:65)
at LoadersList.<anonymous> (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:78:12)

I was getting deprecated warning

Webpack 2: WARNING in .png, .svg, .. DEPRECATED. Configure optipng's optimizationLevel option in it's own options. (optipng.optimizationLevel)

after following above thread. I introduced option property in my webpack. Here's my webpack config

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: { app: './src/app.js' },
  output: {
    filename: 'public/build/bundle.js',
    sourceMapFilename: 'public/build/bundle.map'
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        query: {
          presets: ['stage-0', 'react', 'es2015'],
          plugins: ['transform-decorators-legacy', 'transform-class-properties']
        }
      },
      { test: /\.css$/, loaders: ['style-loader', 'css-loader'] },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file?name=public/fonts/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ],

        options: {
          query: {
            mozjpeg: {
              progressive: true
            },
            gifsicle: {
              interlaced: true
            },
            optipng: {
              optimizationLevel: 7
            }
          }
        }
      }
    ]
  }
};

But I am still getting that error.

Edit 1 - after Michael's answer

I still got error, this is my webpack now

    var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: {app: './src/app.js' },
  output: {filename: 'public/build/bundle.js',
        sourceMapFilename: 'public/build/bundle.map' },
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loader: 'babel-loader',query: {
        presets: ['stage-0','react','es2015'],
        plugins: ["transform-decorators-legacy","transform-class-properties"]
    } },
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]'  },
      {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        mozjpeg: {
          progressive: true
        },
        gifsicle: {
          interlaced: true
        },
        optipng: {
          optimizationLevel: 7
        }
      }
    }
  ]
}
    ]
  }
}

the error looks like this now

    ERROR in ./public/imgs/common/jcrop/Jcrop.gif
Module parse failed: /home/ubuntu/workspace/node_modules/image-webpack-loader/index.js!/home/ubuntu/workspace/public/imgs/common/jcrop/Jcrop.gif Unexpected character ' (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' (1:6)
    at Parser.pp$4.raise (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseIdent (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/ubuntu/workspace/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/home/ubuntu/workspace/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at /home/ubuntu/workspace/node_modules/image-webpack-loader/index.js:71:9
 @ ./~/css-loader!./src/main-blessed3.css?z=1490800022920 6:271558-271606

score 0 · Answer 1 · answered Mar 30 '17 at 19:45

The problem is your last rule:

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  loaders: [
    'file?hash=sha512&digest=hex&name=[hash].[ext]',
    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
  ],

  options: {
    query: {
      mozjpeg: {
        progressive: true
      },
      gifsicle: {
        interlaced: true
      },
      optipng: {
        optimizationLevel: 7
      }
    }
  }
}

You define options on the rule, but you have multiple loaders. This is not allowed, it only works if it's a single loader (as a shortcut), otherwise you need to specify the options on the loader directly not the rule. The loaders don't even work in webpack 2 because you're leaving off the -loader suffix which is no longer allowed in webpack 2 (as shown in the Automatic -loader module name extension removed).

Also don't use inline query options, use options on the loader (query exists for compatibility reasons and options should be preferred). Because of the inline configuration you get the deprecation warnings, as you still have the options set there. Also your file-loader options are not correct, the type of the hash is specified in the name option with [<hashType>:hash:<digestType>:<length>] as described in Filename template placeholders.

The correct and clean version of the above rule is:

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        mozjpeg: {
          progressive: true
        },
        gifsicle: {
          interlaced: true
        },
        optipng: {
          optimizationLevel: 7
        }
      }
    }
  ]
}

By the way, you also have .svg specified in another rule (for your fonts), this will likely have unwanted effects, you should only have one rule that matches it.

Thanks Michael. I applied your solution but I am still getting error. can you please check original post. — Ankur Sharma, Mar 30 '17 at 20:04
can you please take a look the error ?You are my last hope :) — Ankur Sharma, Mar 30 '17 at 20:30
Looks like it's trying to apply only `image-webpack-loader` (without the `file-loader`). Make sure not to specify any loaders inline where you import `Jcrop.gif`. Can't really tell more from the error. — Michael Jungo, Mar 30 '17 at 21:46

Cannot define 'query' and multiple loaders in loaders list, webpack error

1 Answers1