Cannot start react module

Question

Getting the following exception when starting the npm.

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

var path= require('path');

module.exports = {
  entry : './script.jsx',
  output : {
    path : path.resolve(__dirname,''),
    filename: 'transpiled.js'
  },
  module : {
    loaders: [
      {
      test:/\.jsx?$/,
      loaders:'babel-loader',
      exclude : /node_modules/,
      query : {
        presets : ['es2015','react']
      }
    }
  ]
}
}

After the updations the code is running but react components are not getting rendered on the screen.

//Update
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test title</title>
</head>
<body>
  <div id ="content">
      <h1>This is the demo of your web page</h1>
  </div>
  <script src ="transpiled.js"></script>
</body>
</html>

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

module.exports = {
  entry : './script.jsx',
  output : {
    path : path.resolve(__dirname,'react/index.html'),
    filename: 'transpiled.js'
  },
  module : {
    rules: [ // rules rules
        {
          test: /\.jsx?$/,
          loaders: 'babel-loader',
          //use:'babel-loader', // use here
          exclude : /node_modules/,
          query : {
            presets : ['es2015','react']
          }
        }
      ]
}
}

//script.jsx
import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  render() {
      return (
          <h2>Hello World !!!</h2>
      );
  }
}

ReactDom.render(
  <MyComponent/>,document.getElementById('content')
);

//package.json
{
  "name": "reactjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "it": "webpack-dev-server --hot"
  },
  "author": "chetan",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-dev-server": "^3.1.3",
    "webpack-hot-middleware": "^2.21.2"
  },
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "webpack-sources": "^1.1.0"
  }
}

Artem Mirchenko · Accepted Answer · 2018-04-15 13:51:18Z

1

You need to replace keyword loaders to keyword rules. And in each rules object replace loaders to keyword use.

module.exports = {
  entry : './script.jsx',
  output : {
    path : path.resolve(__dirname,''),
    filename: 'transpiled.js'
  },
  module : {
    rules: [ // rules rules
      {
        test:/\.jsx?$/,
        use:'babel-loader', // use here
        exclude : /node_modules/,
        query : {
          presets : ['es2015','react']
        }
      }
    ]
  }
}

Edit

Now your component not rendered on the screen because output.path in webpack config incorrect. It should be like this:

output : {
   path : path.resolve(__dirname),
   filename: 'transpiled.js'
}

Because script tag in your html reference in root of the project:

<script src="transpiled.js"></script>

edited Apr 15, 2018 at 13:51

answered Apr 15, 2018 at 10:59

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chetan Over a year ago

any example of use keyword ?

Artem Mirchenko Over a year ago

See code in my answer, i added comment where to replace

Chetan Over a year ago

Thanks , Now my code is running but react components are not getting loaded , I have updated the question

Chetan Over a year ago

This warning is there : WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

Artem Mirchenko Over a year ago

Okay i see the error, i update my answer, please look on it

|

Cuong Vu · Accepted Answer · 2018-04-15 11:06:19Z

Your webpack.config file is in the wrong format

var path = require('path');

module.exports = {
    entry: './script.jsx',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'transpiled.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loaders: 'babel-loader',
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                // your preset
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

See more here

Collectives™ on Stack Overflow

Cannot start react module

2 Answers 2

Edit

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related