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

lagerone · Accepted Answer · 2018-03-07 20:56:40Z

12

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')
    },
  ....

answered Mar 7, 2018 at 20:56

lagerone

1,78714 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2018-03-07 22:12:39Z

1

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.

answered Mar 7, 2018 at 22:12

Matt

75.7k11 gold badges172 silver badges167 bronze badges

1 Comment

Jimi Over a year ago

It's a good point you make, I had to update one or two plugins for this to work but it's working now.

Juri Sinitson · Accepted Answer · 2021-11-15 11:20:06Z

0

Ran into same issue when running yarn build-storybook according to https://storybook.js.org/docs/angular/workflows/publish-storybook using Storybook v6.3.8 with webpack 5 already opted-in. The building command still used webpack 4.

Putting this

module.exports = {
  core: {
    builder: 'webpack5',
  },
};

in the root main.js solved the problem.

Source: https://www.npmjs.com/package/@storybook/builder-webpack5

answered Nov 15, 2021 at 11:20

Juri Sinitson

1,6831 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related