Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

by

The error “Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema” error occurs in React.js when there is a “version mismatch between your configuration file and the Webpack version being used.”

The easiest way to fix the error is by “upgrading the webpack to the latest version.” Using the correct webpack version for the configuration file will fix the error.

If you are still facing the error, you can apply the following solutions individually and see if they can fix the issue!

Check the Webpack Version

Find out what version of Webpack you’re using by running the command:

webpack --version

It will give you the currently installed webpack version, and if it is outdated, upgrade it to the latest version.

An empty string in the “resolve” array

If, by chance, you put an empty string as a value for the “resolve” array inside the webpack.config.js file. Then it can cause an error. You can fix it by removing an empty string in the “resolve” array.

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

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

Reinstall the project

Reinstall the whole project, but remember that webpack-dev-server must be globally installed.

In devServer object:inline:false

Your webpack.config.js file looks like this:

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']
        }
     } 
   ]
  }
};

Update Your Configuration

Adjust your configuration file to match the API schema for the version of Webpack you’re using. This may involve renaming properties, changing value types, or adjusting how plugins and loaders are configured.

Consider Downgrading or Upgrading Webpack:

If adjusting the configuration to the current version of Webpack is too troublesome, you may also consider downgrading or upgrading Webpack to a version that matches your current configuration. This should be done cautiously, as it might affect other dependencies or parts of your build process.

Use a Migration Tool (if available):

For some major version changes, Webpack provides migration guides or tools to help you update your configuration. Check the Webpack documentation for information on migrating between specific versions.

Test Your Changes

After making the necessary changes, test your build process to ensure everything works as expected. It may be helpful to run Webpack with the –debug flag to get more detailed information if you encounter any issues.

Consider Using a Scaffolding Tool

If you struggle with manual configuration, consider using a scaffolding tool like create-react-app or a pre-configured starter kit that matches your needs. These tools often abstract away much of the Webpack configuration, making it easier to get started.

By aligning your configuration with the version of Webpack you are using, you should be able to resolve the error. Feel free to ask if you encounter any specific issues while updating the configuration!

I hope one of these solutions works for you and you can fix the error!

Related posts

cannot find module CSS/SCSS in TypeScript

cannot find module ‘webpack/bin/config-yargs’

Leave a Comment