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

Answer 1

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

Answer 2

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

Answer 3

Use rules in webpack 4 instead of loaders.

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

Answer 4

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

The migration documentation is also useful.

Answer 5

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.