webpack error warning in png svg deprecated

Question

I have a very strange error. I got this exact same here mentioned here

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

Ii impleted the solution and now my webpack looks like this

https://codepaste.net/8owse4

But now i get this error

/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60
    throw new Error("Element from loaders list should have one of the fields 'loader' or 'loaders'");
    ^

Error: Element from loaders list should have one of the fields 'loader' or 'loaders'

So, I am in kind of loop. I am using webpack 2. I understand I have to reconfigure webpack . But, its kind of loop. Its just not working. Can someone help me out.

score 2 · Accepted Answer · answered Mar 30 '17 at 14:50

As Doodlebot said above, webpack2 now uses module.rules instead of module.loaders but module.loaders still works according to the documentation:

The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old module.loaders syntax is still valid and the old names are parsed. The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using module.rules.

So it's not the problem here. If you choose to use module.loaders, you need to pass an array of objects to it and each of those objects must have a field loader as your error points out:

Error: Element from loaders list should have one of the fields 'loader' or 'loaders'

This is what you have currently:

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'
    },
    devtool: '#source-map',
    //loaders
    module: {
        loaders: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    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: {
        query: {
          name:'assets/[name].[ext]'
        }
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        query: {
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: true,
          },
          optipng: {
            optimizationLevel: 7,
          }
        }
      }
    }]
  },

  
]
    }
};

And from that you had spelled the loader field for your css as loaders

loaders: [ 'style-loader', 'css-loader' ]

That should be

loader: ['style-loader', 'css-loader']

I also noticed you are mixing syntax. If you use module.loaders then your objects should have test and loader, if you use module.rules then your objects have test and use. Don't mix them. Here are examples:

module{ loaders: [{test: /\.css$/, loader: [ 'style-loader', 'css-loader' ]}] }

module{ rules: [{test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}] }

Your use or loader field can take a string (style-loader!css-loader) or array ([ 'style-loader', 'css-loader' ]) but that shouldn't make you pluralize the field name

score 0 · Answer 2 · answered Mar 30 '17 at 14:03

Looking over the migration guide for Webpack 2 I think that error is coming from module.loaders needing to be module.rules. https://webpack.js.org/guides/migrating/

I took a pass at migrating your config file.

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'
    },
    devtool: '#source-map',
    //loaders
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                options: {
                    presets: ['stage-0', 'react', 'es2015'],
                    plugins: ['transform-decorators-legacy', 'transform-class-properties']
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff2?)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/[name].[ext]'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true
                            },
                            gifsicle: {
                                interlaced: true
                            },
                            optipng: {
                                optimizationLevel: 7
                            }
                        }
                    }
                ]
            }
        ]
    }
};

webpack error warning in png svg deprecated

2 Answers2