Uncaught TypeError: Cannot read property 'call' of undefined after webpack rebuild CommonsChunkPlugin

Question

I have a strange error when trying to require an html file. The code in question is an AngularJs app written in typescript and using webpack.

app.directive.ts

// require('./app.scss');

// import AppController from './app.controller';

function AppDirective(): ng.IDirective {
  return {
    restrict: 'E',
    scope: {},
    controllerAs: 'vm',
    // controller: AppController,
    controller: () => {},
    // template: require('./app.html')
    template: '<div>this is a test</div>'
  }
}

angular
  .module('myApp')
  .directive('appDirective', AppDirective);

app.controller.ts

export default class AppController {

  public static $inject = ['$scope'];

  constructor(private $scope) {

  }
}

app.html

<div>
  THIS IS A TEST, REMAIN CALM
</div>

app.scss is empty.

Now, as it is, comments included, this code builds with no errors in webpack and will deploy using the webpack dev server.

While using the webpack dev server, which lets you change code while the server is running and reload it live, I can uncomment any/all of the commented lines and it will work properly.

However, if I turn off the dev server and rebuild, it fails giving this error:

Uncaught TypeError: Cannot read property 'call' of undefined

Uncaught TypeError: Cannot read property 'call' of undefined__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.152 @ app.ts:2__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.153 @ main.browser.ts:1__webpack_require__ @ bootstrap 9163605…:50
webpackJsonp.0 @ main.bundle.js:7__webpack_require__ @ bootstrap 9163605…:50

webpackJsonpCallback @ bootstrap 9163605…:21(anonymous function) @ main.bundle.js:1

fails at this line in the webpack:boostrap file:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

This error occurs while trying to uncomment the app.scss line, the controller lines, or the app.html line. This happens only after a rebuild, with any or all of the lines uncommented.

I'm using webpack to build, and commonjs for module loading in the tsconfig, and I have the following webpack loaders in the webpack.config for these types of files:

      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader',
        exclude: [/\.(spec|e2e)\.ts$/]
      },

      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },

      {
        test: /\.html$/,
        loader: 'raw-loader',
        exclude: [helpers.root('src/index.html')]
      },

I have been using angular js and typescript for a while, but this is the first time starting my own project, and I'm still stumbling my way through webpack.

I am very confused as to why this code will work if I insert it while it is running, but then cease to work after rebuilding. I figure it has something to do with my webpack config, but I'm unable to figure it out and I've been stuck on this for a while. Any help would be appreciated.

UPDATE I found the cause, but not a solution. It seems to be caused by the CommonsChunkPlugin in my webpack config:

new webpack.optimize.CommonsChunkPlugin({
      name: helpers.reverse(['polyfills', 'vendor', 'main']),
      // minChunks: Infinity
    }),

If I remove the plugin the error disappears, but then I no longer have this plugin.

UPDATE 2

Changing the plugin initialization to this fixes the issue:

new webpack.optimize.CommonsChunkPlugin({
  names: ['polyfills', 'vendor', 'main'],
  minChunks: 2
}),

But I still don't understand why

Solution

Posting update #2 as answer as per Zze's recommendation.

Changing the plugin initialization to this fixes the issue:

new webpack.optimize.CommonsChunkPlugin({
  names: ['polyfills', 'vendor', 'main'],
  minChunks: 2
}),

But I still don't understand why

Comments

[Muhaimin]

what do you mean by multiple?