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, ments 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 unment any/all of the mented 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 unment 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 unmented.

I'm using webpack to build, and monjs 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

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, ments 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 unment any/all of the mented 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 unment 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 unmented.

I'm using webpack to build, and monjs 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

• javascript
• angularjs
• typescript
• webpack

• "it will work properly", can you define what that means? What is the output when it "works properly"? – Josh Beam Commented Apr 15, 2016 at 20:39
• right now just a blank page showing the following: one fish two fish red fish blue fish Loading... THIS IS A TEST, REMAIN CALM when it's not working it shows {{data}} Loading... So angularjs stop working in the second case – Kyle Commented Apr 15, 2016 at 22:02
• it might have been as simple as the name -> names that was causing an issue – Kyle Commented Apr 15, 2016 at 22:05
• 1 Is it related to this issue? github./webpack/webpack/issues/1016#issuement-182093533 – John Reilly Commented Jun 9, 2016 at 10:26
• 1 You should post update 2 as an answer if it resolved the issue so that people can upvote etc. – Zze Commented Dec 15, 2017 at 22:35

2 Answers 2

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

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

If you have multiple webpack-piled files loaded on the same page, they will overwrite each other. use the module.output.library option to define a 'namespace' for your app.