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

Question

I have upgraded my web application's packages, this upgrade seems to have broken my build. I first received an error telling me to install the webpack CLI,

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI.

-> When using npm: npm install webpack-cli -D

-> When using yarn: yarn add webpack-cli -D module.js:471 throw err; ^

Then after getting the error above and installing the CLI I have started to get the error below. Its saying there is an un known property loaders, but I'm passing the 'loaders' array in like:

module: { loaders: [ [Object], [Object], [Object], [Object], [Object], [Object] ] } }

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

-- package.json

"url-loader": "^1.0.1",
"webpack": "^4.1.0",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"

webpack shared config

module.exports = {
  entry: './src/main.js',
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx$|\.js$/,
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, '../src')
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css',
    }, {
      test: /\.woff2?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      include: path.resolve(__dirname, '../assets')
    },
    {
      test: /\.(eot|jpeg|jpg|png|svg|ttf|webp)$/,
      loader: 'file-loader',
      include: path.resolve(__dirname, '../assets')
    },
    {
        test: /\.scss$/,
        loader: 'style!css!sass?outputStyle=expanded',
    },
    {
        test: /\.(png|jpg|svg)$/, loader: 'url-loader?limit=8192'
    },
    ]
  }
};

-- webpack dev config

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('Script-Ext-Html-Webpack-Plugin');
const pkg = require('../package.json');
const shared = require('./shared.js');

const bundleName = `${pkg.name}-${pkg.version}.js`;
const indexHtmlPath = path.resolve(__dirname, '../static/index.html');
const port = process.env.PORT || 3000;

 // console.log(path.resolve(__dirname, 'dist', `${bundleName}`));
console.log('shared::: ',shared)
module.exports = {
  devtool: 'sourcemap',
    entry: [
        `webpack-dev-server/client?http://0.0.0.0:${port}`,
        'webpack/hot/only-dev-server',
        shared.entry
    ],
    output: {
        path: path.resolve(__dirname, '../'),
        filename: `${bundleName}`
    },
  module: shared.module,
  resolve: shared.resolve,
  devServer: {
    port: port,
    inline: true,
    contentBase: path.resolve(__dirname, '../static'),
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: indexHtmlPath
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'async'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

console.log(module.exports.output);

Answer 1

In your webpack shared config you should rename module.loaders to module.rules.

module.exports = {
  entry: './src/main.js',
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx$|\.js$/,
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, '../src')
    },module.exports = {
  entry: './src/main.js',
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    rules: [{ // <---------------- change to rules here
      test: /\.jsx$|\.js$/,
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, '../src')
    },
  ....

Answer 2

Webpack 4's configuration and plugin system has changed from 3.

It might be better to stick with weback@^3 for a while on existing projects while waiting for plugins to be updated and bugs to be ironed out. For example script-ext-html-webpack-plugin.