javascript - Ohanterat TypeError: Kan inte läsa egenskapen 'call' av undefined efter webpack-ombyggnad av CommonsChunkPlugin

Jag har ett märkligt fel när jag försöker require en HTML-fil. Koden i fråga är en AngularJs-app skriven i TypeScript och använder 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 är tom.

Nu, som det är, inklusive kommentarer, kompileras den här koden utan fel i webpack och kan distribueras med webpack dev-servern.

När man använder webpack dev-servern, som låter dig ändra koden medan servern körs och ladda om den live, kan jag avkommentera vilken/vilka som helst av de kommenterade raderna och det kommer att fungera korrekt.

Men om jag stänger av utvecklingsservern och bygger om, misslyckas det med följande fel:

Okontrollerad TypeError: Kan inte läsa egenskapen 'call' av 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(anonim funktion) @ main.bundle.js:1

misslyckas på denna rad i webpack:boostrap-filen:

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

Detta fel uppstår när man försöker avkommentera raden app.scss, kontrollantraderna eller raden app.html. Detta händer endast efter en ombyggnad, med en eller alla rader avkommenterade.

Jag använder webpack för att bygga, och commonjs för moduluppladdning i tsconfig, och jag har följande webpack-loaders i webpack.config för dessa typer av filer:

      {
        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')]
      },

Jag har använt Angular JS och TypeScript ett tag, men detta är första gången jag startar mitt eget projekt, och jag famlar fortfarande mig igenom webpack.

Jag är väldigt förvirrad över varför denna kod fungerar om jag infogar den medan den körs, men sedan slutar fungera efter att jag bygger om. Jag antar att det har något att göra med min webpack-konfiguration, men jag kan inte lista ut det och har fastnat på detta ett tag. All hjälp skulle uppskattas.

UPPDATERING Jag hittade orsaken, men inte en lösning. Det verkar orsakas av CommonsChunkPlugin i min webpack-konfiguration:

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

Om jag tar bort tillägget försvinner felet, men då har jag inte längre detta tillägg.

UPPDATERING 2

Att ändra plugin-initialiseringen till detta löser problemet:

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

Men jag förstår fortfarande inte varför

Svar #1

Publicerar uppdatering #2 som svar enligt Zzes rekommendation.

Att ändra plugin-initialiseringen till detta löser problemet:

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

Men jag förstår fortfarande inte varför

Svar #2

Om du har flera webpack-kompilerade filer laddade på samma sida kommer de att skriva över varandra. Använd module.output.library-alternativet för att definiera ett 'namespace' för din app.

Relaterade artiklar