SOLVED -> Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

The error

Scroll for the solution! Usually after you upgrade from webpack 3 to webpack 4, you get the following error:

 node server

/home/lcubo/ipchronos-frontend/node_modules/webpack/lib/webpack.js:185
                        throw new RemovedPluginError(errorMessage);
                        ^

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
    at Object.get [as CommonsChunkPlugin] (/home/lcubo/ipchronos-frontend/node_modules/webpack/lib/webpack.js:185:10)
    at Object.<anonymous> (/home/lcubo/ipchronos-frontend/build/webpack.client.config.js:23:26)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/lcubo/ipchronos-frontend/build/setup-dev-server.js:6:22)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Solution

Your old webpack config has the following in the plugins:

new webpack.optimize.CommonsChunkPlugin({$

You will need to remove the CommonsChunkPlugin and use the new optimization config section:

javascript optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', cacheGroups: { default: { enforce: true, priority: 1 }, vendors: { test: /[\\/]node_modules[\\/]/, priority: 2, name: 'vendors', enforce: true, chunks: 'all' } } } },

Remember that optimization is new section in the config, like plugins.