Webpack Upgrade to 4.29.0

I will share my experiences when i tried to upgrade webpack 3.1.0 to webpack 4.29.0 on my Angular 7.2.2 project.

Generally on webpack upgrades needs many additional configurations. The reason why i upgrade is here;

Webpack 4.0 Release: What’s New?

If you compare build time with the 3rd version its better like fifty percent rate. Here what i encountered while i am upgrading;

1-) Cannot find module ‘webpack/bin/config-yargs’ ERROR!

Error: Cannot find module ‘webpack/bin/config-yargs’
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
 at Function.Module._load (internal/modules/cjs/loader.js:506:25)
 at Module.require (internal/modules/cjs/loader.js:636:17)
 at require (internal/modules/cjs/helpers.js:20:18)
 at Object.<anonymous> (Q:\……\……\……\node_modules\webpack-dev-server\bin\webpack-dev-server.js:46:1)
 at Module._compile (internal/modules/cjs/loader.js:688:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
 at Module.load (internal/modules/cjs/loader.js:598:32)
 at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
 at Function.Module._load (internal/modules/cjs/loader.js:529:3

Solution;

Webpack CLI
“webpack-dev-server”: “3.1.14”
“webpack-dev-middleware”: “3.4.0”, installed.

2-) CommonsChunkPlugin problem!

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
 at Object.get [as CommonsChunkPlugin] (Q:\….\………..\……\node_modules\webpack\lib\webpack.js:165:10)
 at Object.<anonymous> (Q:\…….\…….\…..\config\webpack.common.js:50:30)
 at Module._compile (internal/modules/cjs/loader.js:688:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
 at Module.load (internal/modules/cjs/loader.js:598:32)
 at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
 at Function.Module._load (internal/modules/cjs/loader.js:529:3)
 at Module.require (internal/modules/cjs/loader.js:636:17)
 at require (internal/modules/cjs/helpers.js:20:18)
 at Object.<anonymous> (Q:\……\……\……\config\webpack.dev.js:3:20)

Solution:

webpack.optimize.CommonsChunkPlugin changed with webpack.DefinePlugin

3-)“loaders” property under module in webpack.common.js file changed with “rules”

4-) Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead Error!

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
 at Chunk.get (Q:\……\………..\node_modules\webpack\lib\Chunk.js:713:9)
 at Q:\……\…..\….\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
 at Array.forEach (<anonymous>)
 at Q:\….\…..\….\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
 at AsyncSeriesHook.eval [as callAsync] (eval at create (Q:\……\…….\…….\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:14:1)
 at AsyncSeriesHook.lazyCompileHook (Q:\……\………\…………\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
 at Compilation.seal (Q:\………\………\……..\node_modules\webpack\lib\Compilation.js:890:27)
 at hooks.make.callAsync.err (Q:\…….\……\………\node_modules\webpack\lib\Compiler.js:482:17)
 at _done (eval at create (Q:\…..\…….\…….\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
 at _err3 (eval at create (Q:\……\………\………..\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:56:22)
 at _addModuleChain (Q:\……….\………..\………….\node_modules\webpack\lib\Compilation.js:758:12)
 at processModuleDependencies.err (Q:\…….\………\…………\node_modules\webpack\lib\Compilation.js:697:9)

Solution: npm install extract-text-webpack-plugin@next

5-) Core.js error!

WARNING in ./node_modules/@angular/core/fesm5/core.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
WARNING in ./node_modules/@angular/core/fesm5/core.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/

Solution:
System.import(module) changed to import(module) in ./node_modules/@angular/core/fesm5/core.js

6-) “mode” property should be added!

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Solution:

module.exports = webpackMerge(commonConfig, {
   devtool: “source-map”,
   mode: ‘production’,
          .
          .
          .
}

In webpack config files “mode” added as ‘production’, ‘development’ or ‘none’.

7-) “mode” property should be “development” | “production”| “none”!

mode property should be one of those;

-development
-production
-none

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 — configuration.mode should be one of these:
 “development” | “production” | “none”
 -> Enable production optimizations or development hints.

8-) UglifyJsPlugin Error

Solution:

In webpack.config file

new webpack.optimize.UglifyJsPlugin({
  mangle: {
    keep_fnames: true
  }
}),
-and-
new UglifyJsPlugin({
  uglifyOptions: {
    output: {
      ascii_only: true,
      beautify: false
    }
  }
}),

Changed;

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        mangle: {
          keep_fnames: true
        },
        output: {
          ascii_only: true,
          beautify: false
        }
      },
    }),
  ],
},

9-) TypeError: Cannot read property ‘_tsInstances’ of undefined

In your webpack common comfiguration file if you are using awesome-typescript-loader and the version is not up to date you could be getting that error. Do not forget the update awesome-typescript-loader!