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

Question

Cannot build production mode due to configuration object that does not match the API schema. The error happened after updating webpack@3.0.0 to version webpack@4.40.2. I updated the webpack version because extract-text-webpack-plugin is not compatible with webpack@3.0.0.

below is the terminal error when i ran yarn run build:prod (production mode)

below is the webpack.config.js file

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env)=>{
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');

  console.log('env', env);
  return {
    entry: './src/app.js',
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },{
        test: /\.s?css$/,
        use: CSSExtract.extract({
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      }]
    },
    plugin: [
      CSSExtract
    ],
    devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true
    }
  
  
  }
};

below is the package.json file

{
  "name": "expensify-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "test": "jest"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "enzyme": "3.0.0",
    "enzyme-adapter-react-16": "1.0.0",
    "jest": "20.0.4",
    "live-server": "^1.2.0",
    "moment": "^2.24.0",
    "node-sass": "4.5.3",
    "normalize.css": "7.0.0",
    "npm": "^6.11.3",
    "raf": "3.3.2",
    "react": "16.0.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dates": "^21.1.0",
    "react-dom": "16.0.0",
    "react-modal": "2.2.2",
    "react-redux": "5.0.5",
    "react-router-dom": "^5.0.1",
    "react-test-renderer": "16.0.0",
    "redux": "^4.0.4",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "uuid": "^3.3.3",
    "validator": "8.0.0",
    "webpack": "^4.40.2",
    "webpack-dev-server": "2.5.1"
  },
  "devDependencies": {
    "extract-text-webpack-plugin": "^3.0.2",
    "webpack-cli": "^3.3.9"
  }
}

Answer 1

Change 'plugin' to 'plugins' in your Webpack config