Webpack has been initialised using a configuration object that does not match the API schema. webpack install by “npm install webpack”

Question

I am learning on React-JS. I have written a simple project. But getting an error when I run "npm start" command.

My Webpack.config.js file is given below--

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

var DIST_DIR= path.resolve(__dirname, 
"dist");
 var SRC_DIR= path.resolve(__dirname, 
 "src");

 var config={
 entry: SRC_DIR + "/app/index.js",
 output:{
    path: DIST_DIR + "/app",
    file: "bundle.js",
    publicPath: "/app/"
},
module:{
    loaders: [
        {
            test: /\.js?/,
            include: SRC_DIR,
            loader: "babel-loader",
            query:{
                presets: ["react", 
"es2015", "stage-2"]
            }
        }
    ]
  }
};

module.exports=config;

package.json file --

{
  "name": "basic-reactjs",
  "version": "1.0.0",
  "description": "Some Basic ReactJS",
  "main": "index.js",
  "scripts": {
  "start": "npm run build",
  "build": "webpack -d && cp 
        src/index.html dist/index.html 
       && webpack-dev-server --content- 
       base src/ --inline --hot",
  "build:prod": "webpack -p && cp 
     src/index.html dist/index.html"
       },
  "keywords": [
   "reactjs"
  ],
  "author": "Numery Zaber",
  "license": "MIT",
  "dependencies": {
  "react": "^16.6.3",
  "react-dom": "^16.6.3"
  },
  "devDependencies": {
  "babel-loader": "^8.0.4",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-2": "^6.24.1",
  "webpack": "^4.26.0",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.10"
}

Webpack install by the follwoing command

npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev

Please help me to solve the issue.

Subhanshu Subhanshu · Accepted Answer · 2018-11-21T05:27:01

The schema in Webpack 4 is now changed.You have imported the loaders which was working in older version of webpack.

For more details : https://webpack.js.org/concepts/loaders/

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

var DIST_DIR= path.resolve(__dirname, 
"dist");
 var SRC_DIR= path.resolve(__dirname, 
 "src");

 var config={
 entry: SRC_DIR + "/app/index.js",
 output:{
    path: DIST_DIR + "/app",
    filename: "bundle.js",
    publicPath: "/app/"
},
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["react","es2015", "stage-2"], 
        },
      }
    }
  ]
}
};

module.exports=config;

You can also use @babel/preset-env.

Webpack has been initialised using a configuration object that does not match the API schema. webpack install by “npm install webpack”

1 Answers