configuration.module has an unknown property 'loaders'

Question

my output of error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory).

my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

my webpack version:

webpack@4.1.1

score 404 · Accepted Answer · edited Aug 17 '19 at 05:13

404

You should change loaders to rules in webpack 4:

change:

loaders

to:

rules

source: Loaders

Example:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

edited Aug 17 '19 at 05:13

Edgar

6,022
8
33
66

answered Mar 20 '18 at 04:39

S.M_Emamian

17,005
37
135
254

2

Is it a typo? It should be `rules` in webpack 4. – Sin Mar 20 '18 at 22:51
1

you should use rules in webpack 4. – S.M_Emamian Mar 21 '18 at 06:10
4

change loaders to rules in webpack 4... in case it needed to be said again :/ – Helmut Granda May 21 '18 at 17:06
5

You should explain in your answer that the reason for the change is webpack 4. – kojow7 Jun 07 '18 at 17:31

score 16 · Answer 2 · answered Mar 26 '18 at 14:38

16

Use rules in webpack 4 instead of loaders.

https://webpack.js.org/concepts/loaders/

answered Mar 26 '18 at 14:38

Shawn Stephens

161
2

score 4 · Answer 3 · answered Sep 06 '18 at 07:14

4

You should use the migration utility to migrate your webpack config files, it worked for me.

The migration documentation is also useful.

answered Sep 06 '18 at 07:14

MattG

5,589
5
36
52

score 3 · Answer 4 · answered May 24 '18 at 09:04

3

Above given answers are working but we can resolve this issue by changing webpack and webpack-dev-server version to

"webpack": "3.8.1",
"webpack-dev-server": "2.9.4"

It can also solve the issue. Hope it will help.

answered May 24 '18 at 09:04

Anshul

464
4
14

1

I gave you an uptick. Only problem is that people want to up versions of frameworks and tools to get new features not go back to older versions just to ensure they don't have to change their config files. Perhaps taking the pain to change the config file to align with the new way the tool works is not bad. Unless that is impossible. – Eniola Mar 10 '19 at 18:17
1

Thanks @Eniola, Yeah you are right. As I mentioned the S.M_Emamian answer is correct but my answer will work if someone agrees to work will the older version of webpack. – Anshul Mar 12 '19 at 08:27

score 2 · Answer 5 · answered Jul 26 '20 at 00:52

Working for me below webpack.config.js

module.exports = {
    entry: [
        '.src/index.js'
    ],
    output:{
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module:{
        rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
}

score 0 · Answer 6 · answered Dec 06 '22 at 09:39

I am using Webpack 5 and I removed below config from my webpack.config. It worked for me after removing. It may help some other people who still facing error

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

configuration.module has an unknown property 'loaders'

6 Answers6

Linked