Webapack 2 - It's no longer allowed to omit the '-loader' suffix when using loaders.

[quantuminformation]

I keep getting this error It's no longer allowed to omit the '-loader' suffix when using loaders. when trying either:

      {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        loaders: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            query: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4
              }
            }
          }
        ]
      }

or just using loader: 'image-webpack-loader',

[tcoopman]

Would you like to make a pull request with the requested changes?

[huiyonghkw]

ERROR in ./~/.0.26.1@css-loader!./~/.1.3.0@gentelella/vendors/bootstrap/dist/css/bootstrap.min.css
Module not found: Error: Can't resolve 'img' in '/Users/chenghuiyong/Applications/www/collect.weipeiapp.com'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'img-loader' instead of 'img'.
 @ ./~/.0.26.1@css-loader!./~/.1.3.0@gentelella/vendors/bootstrap/dist/css/bootstrap.min.css 6:3700-3752
 @ ./~/.1.3.0@gentelella/vendors/bootstrap/dist/css/bootstrap.min.css

[silvenon]

@QuantumInformation I think you might be getting this issue from some other loader defined in your configuration, this loader works fine for me with Webpack 2.

@bravist you're using img instead of img-loader. Also, img-loader ≠ image-webpack-loader.

[yusuf987]

The error "It's no longer allowed to omit the '-loader' suffix when using loaders." is simply saying you need to append -loader where you are using loader, like if you are using babel as a loader then you need to put "babe-loader"

eg : wrong 
 module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
				
            query: {
                presets: ['es2015', 'react']
            }
         }
      ]
   }

eg: correct 
 module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
				
            query: {
                presets: ['es2015', 'react']
            }
         }
      ]
   }

[andreferreiradaweb]

You saved my life, thanks a lot

[Corbusier]

thanks alot

[silvenon]

When I see the amount of upvotes on the comment above, I wonder what isn't clear about the error message. Would this be better?

It's no longer allowed to omit the '-loader' suffix when specifying loader names.

[DuudeXX8]

I have the same issue pls someone help

const NODE_ENV = process.env.NODE_ENV || "development";

module.exports = {
	entry: "./common",
	output: {
		path: __dirname + "/dist",
		filename:"bundle.js"
	},
	watch:NODE_ENV == "development",

	devtool:NODE_ENV == "development" ? "cheap-inline-module-source-map" : null,

	module: {

		loaders: [{
			 test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

          	query: {
                presets: ['es2015', 'react']
            }
		}]

		
	}
};

[silvenon]

https://github.com/tcoopman/image-webpack-loader/issues/59#issuecomment-277428044