New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
QuantumInformation opened this Issue Dec 20, 2016 · 9 comments

Comments

Projects
None yet
8 participants
@QuantumInformation

QuantumInformation commented Dec 20, 2016

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

This comment has been minimized.

Show comment
Hide comment
@tcoopman

tcoopman Dec 27, 2016

Owner

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

Owner

tcoopman commented Dec 27, 2016

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

@bravist

This comment has been minimized.

Show comment
Hide comment
@bravist

bravist Jan 6, 2017

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

bravist commented Jan 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@silvenon

silvenon Jan 31, 2017

@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.

silvenon commented Jan 31, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@yusuf987

yusuf987 Feb 4, 2017

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

yusuf987 commented Feb 4, 2017

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']
            }
         }
      ]
   }
@andreluissf

This comment has been minimized.

Show comment
Hide comment
@andreluissf

andreluissf Jul 18, 2017

You saved my life, thanks a lot

andreluissf commented Jul 18, 2017

You saved my life, thanks a lot

@Corbusier

This comment has been minimized.

Show comment
Hide comment
@Corbusier

Corbusier Jul 19, 2017

thanks alot

Corbusier commented Jul 19, 2017

thanks alot

@silvenon

This comment has been minimized.

Show comment
Hide comment
@silvenon

silvenon Jul 21, 2017

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.

silvenon commented Jul 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@DuudeXX8

DuudeXX8 Feb 10, 2018

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

		
	}
};

DuudeXX8 commented Feb 10, 2018

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

This comment has been minimized.

Show comment
Hide comment
@silvenon

silvenon commented Feb 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment