Webpack-cli: [webpack-cli] Invalid configuration object.

[hamzahamidi]

Describe the bug
I get the following error when I try running npm run build:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.optimization.splitChunks should be one of these:
   false | object { automaticNameDelimiter?, cacheGroups?, chunks?, defaultSizeTypes?, enforceSizeThreshold?, fallbackCacheGroup?, filename?, hidePathInfo?, maxAsyncRequests?, maxAsyncSize?, maxInitialRequests?, maxInitialSize?, maxSize?, minChunks?, minRemainingSize?, minSize?, name?, usedExports? }
   -> Optimize duplication and caching by splitting chunks by shared modules and cache group.
   Details:
    * configuration.optimization.splitChunks.name should be one of these:
      false | string | function
      -> Give chunks created a name (chunks with equal name are merged).
      Details:
       * configuration.optimization.splitChunks.name should be false.
       * configuration.optimization.splitChunks.name should be a string.
       * configuration.optimization.splitChunks.name should be an instance of function.

What is the current behavior?

To Reproduce

Steps to reproduce the behavior:

1. npm init
2. npm i -D webpack webpack-cli @webpack-cli/init
3. webpack init
4. npm run build

Expected behavior
Building the project

Please paste the results of webpack-cli info here, and mention other relevant information

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 2.29 GB / 31.22 GB
  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 82.0
  Packages:
    terser-webpack-plugin: ^5.0.3 => 5.0.3 
    webpack: ^5.3.2 => 5.3.2 
    webpack-cli: ^4.1.0 => 4.1.0 
  Global Packages:
    webpack-cli: 4.1.0
    webpack: 5.3.2

Additional context
package.json

  "devDependencies": {
    "@types/jest": "^26.0.15",
    "@webpack-cli/init": "^1.0.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "jest": "^26.6.1",
    "terser-webpack-plugin": "^5.0.3",
    "ts-jest": "^26.4.3",
    "ts-loader": "^8.0.7",
    "typescript": "^4.0.5",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  }

Generated webpack.config.js

const path = require('path');
const webpack = require('webpack');

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  plugins: [new webpack.ProgressPlugin()],

  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      loader: 'ts-loader',
      include: [path.resolve(__dirname, 'src')],
      exclude: [/node_modules/]
    }]
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },

  optimization: {
    minimizer: [new TerserPlugin()],

    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        }
      },

      chunks: 'async',
      minChunks: 1,
      minSize: 30000,
      name: true
    }
  }
}

[snitin315]

Because you have provided an invalid value for optimization.splitChunks.name in your config file.

[hamzahamidi]

Why was the invalid value provided by webpack init then?

[snitin315]

Oh! I missed that webpack init was used.

Thanks for reporting. I am looking into it.

[snitin315]

npm run build

@hamzahamidi Can you share your build script?

[hamzahamidi]

The build script is just: webpack . It's the default script after project init

[snitin315]

Thanks 👍🏻. I was able to reproduce the bug. I will push a fix soon.

[hamzahamidi]

I opened a PR which fixed my issue locally, maybe you can take a look. Thank you

[snitin315]

I believe we need to fix the configuration in init-generator as per the webpack schema. Instead of directly changing the webpack schema.

[hamzahamidi]

What about when we want to keep the same name of the chunks when generating bundles for production ? https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksname

[snitin315]

As per my understanding, It's not good for long-term caching hence was changed in webpack-5.

remove name: true and automaticNamePrefix from splitChunks it's not as good as expected

See https://github.com/webpack/webpack/commit/82816676681f4668ee3810591ba3e8c1b536ce5e and https://github.com/webpack/webpack/issues/8426#issuecomment-442375207

Docs need an update.