Error displaying when run npm React JS

Question

I followed a react configuration steps. And i finally try to run it is showing an error. Anyone who can help me please.

this is the config file webpack.config.js

 var config = { entry: './main.js', output: { path:'/', filename: 'index.js', }, devServer: { inline: true, port: 8080 }, module: { loaders: [ { test: /\\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } } module.exports = config; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> > reactapp@1.0.0 start C:\\Users\\Muhammed Suhail\\Desktop\\reactApp > webpack-dev-server --hot × ｢wds｣: 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`). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the reactapp@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\\Users\\Muhammed Suhail\\AppData\\Roaming\\npm-cache\\_logs\\2018-04-30T12_46_31_216Z-debug.log 

This is the error message

Answer 1

This is the right way to do

module: {
  rules: [ // Change this line
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    }
  ]
}

This should fix the issue if not write that down below.

Official webpack docs for babel-loader

How to use webpack loader?
Reference to use loaders with webpack

Babel loader with webpack
Usage for babel-loader plugin