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

Hello sir. I've just added the config file. Please check it out. — Suhail Moh, Apr 30 '18 at 13:25
You added `package.json` file. Please add Webpack config file. — 0_0, Apr 30 '18 at 13:39
Possible duplicate of [Webpack config has an unknown property 'preLoaders'](https://stackoverflow.com/questions/42476185/webpack-config-has-an-unknown-property-preloaders) — 0_0, Apr 30 '18 at 13:40

Rajendran Nadar · Accepted Answer · 2018-04-30T15:05:52.430

0

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

edited Apr 30 '18 at 15:05

answered Apr 30 '18 at 14:22

Rajendran Nadar

2,413
2
21
34

Oh. Okay. Thanks. – Suhail Moh Apr 30 '18 at 15:09
I added reference for you (Y) – Rajendran Nadar Apr 30 '18 at 15:10

Error displaying when run npm React JS

1 Answers1