A module bundler is called Webpack. Bundling can be handled by Webpack in addition to a different task runner. However, due to community-developed webpack plugins, the distinction between a bundler and a task runner has blurred. “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema” is a confusing problem that many programmers encounter. What is the cause and how to fix it, let’s read this article to find best answer.

When Do You Get The Error “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema”?

When you are attempting to run a simple react hello world app, you may encounter the error below.

Invalid configuration object. Webpack has been initialised using a configuration 
object that does not match the API schema. – configuration has an unknown 
property ‘postcss’. These properties are valid: object

How To Solve The Error “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema”

Approach 1: In webpack.config.js, change the loader

The simplest solution to solve the error “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema” is to change the Loader setting in your webpack.config.js file. Switch from loaders to rules. Here’s an illustration.

module: {
loaders: [
rules: [ // Replace loaders to rules
   {
    ...
   },
  ],
 ],
}

After doing that, yourr error will be completely resolved.

Approach 2: Reinstall the entire project

Reinstall the entire project, however keep in mind that webpack-dev-server needs to be installed globally. We go over some server problems, such as webpack not found, and link Webpack accordingly. Resolving some absolute path concerns in the output.

In devServer object: inline: false

Below is webpack.config.js:

module.exports = {
    entry: "./src/js/main.js",
    output: {
        path:__dirname+ '/dist/',
        filename: "bundle.js",
        publicPath: '/'
    },
    devServer: {
        inline: false,
        contentBase: "./dist",
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude:/(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
             }
         ]
    }

};

And here is package.json:

{
  "name": "react-flux-architecture-es6",
  "version": "1.0.0",
  "description": "egghead",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cichy/react-flux-architecture-es6.git"
  },
  "keywords": [
    "React",
    "flux"
  ],
  "author": "Jarosław Cichoń",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cichy/react-flux-architecture-es6/issues"
  },
  "homepage": "https://github.com/cichy/react-flux-architecture-es6#readme",
  "dependencies": {
    "flux": "^3.1.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}

Approach 3: Delete the blank line in webpack.config.js

Deleting the blank line in webpack.config.js is a great way for you to solve the error “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema”.

First, locate the module.exports>resolve>extensions section of your webpack.config.js file. Simply remove it if the string is empty. and you must now fix your mistake.

module.exports = {
  resolve: {
    extensions: ['', '.js', '.jsx'] // Error
  }
  ...
};

Let’s change:

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'] //Working
  }
  ...
};

Approach 4: Change the word “loaders” in “webpack.config.js” to “rules”

To solve the error, you simply need to change the word “loaders” in “webpack.config.js” to “rules”.

Because Webpack 1 uses loaders and Webpack 2 uses rules.

Approach 5: Install Webpack again

Reinstalling Webpack is not bad solution for you handle with your problem. Let’s follow these steps:

First, you simply need to use this command to uninstall Webpack first.

npm uninstall webpack --save-dev

Then, let’s use the following command to reinstall Webpack:

npm install webpack --save-dev

After finishing these steps, your error will completely disappear and your program will run well without any errors, so let’s apply it to get your desired results.

Conclusion

We hope you will enjoy our article about the error. With this knowledge, we know that you can fix your error: “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema” quickly by following these steps! People have a growing community where everybody is usually willing to help if you still need advice or have frequent doubts. Finally, we hope you’re having fun with the amazing options and appreciate spending time reading. Thank you for your reading!

Read more

→ Amazing Methods For: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema in vuejs.