title: Uncaught TypeError: Cannot read property 'call' of undefined after webpack rebuild CommonsChunkPlugin
body: <p>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.</p>
  
  <p>app.directive.ts</p>
  
  <pre><code>// require('./app.scss');
  
  // import AppController from './app.controller';
  
  function AppDirective(): ng.IDirective {
    return {
      restrict: 'E',
      scope: {},
      controllerAs: 'vm',
      // controller: AppController,
      controller: () =&gt; {},
      // template: require('./app.html')
      template: '&lt;div&gt;this is a test&lt;/div&gt;'
    }
  }
  
  angular
    .module('myApp')
    .directive('appDirective', AppDirective);
  </code></pre>
  
  <p>app.controller.ts</p>
  
  <pre><code>export default class AppController {
  
    public static $inject = ['$scope'];
  
    constructor(private $scope) {
  
    }
  }
  </code></pre>
  
  <p>app.html</p>
  
  <pre><code>&lt;div&gt;
    THIS IS A TEST, REMAIN CALM
  &lt;/div&gt;
  </code></pre>
  
  <p>app.scss is empty.</p>
  
  <p>Now, as it is, comments included, this code builds with no errors in webpack and will deploy using the webpack dev server.</p>
  
  <p>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. </p>
  
  <p>However, if I turn off the dev server and rebuild, it fails giving this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'call' of undefined</p>
  </blockquote>
  
  <pre><code>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
  </code></pre>
  
  <p>webpackJsonpCallback @ bootstrap 9163605…:21(anonymous function) @ main.bundle.js:1</p>
  
  <p>fails at this line in the webpack:boostrap file:</p>
  
  <pre><code>modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>      {
          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')]
        },
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>UPDATE</strong>
  I found the cause, but not a solution. It seems to be caused by the CommonsChunkPlugin in my webpack config:</p>
  
  <pre><code>new webpack.optimize.CommonsChunkPlugin({
        name: helpers.reverse(['polyfills', 'vendor', 'main']),
        // minChunks: Infinity
      }),
  </code></pre>
  
  <p>If I remove the plugin the error disappears, but then I no longer have this plugin.</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>Changing the plugin initialization to this fixes the issue:</p>
  
  <pre><code>new webpack.optimize.CommonsChunkPlugin({
    names: ['polyfills', 'vendor', 'main'],
    minChunks: 2
  }),
  </code></pre>
  
  <p>But I still don't understand why</p>