web-dev-qa-db-fra.com

Uncaught TypeError: impossible de lire la propriété 'appel' de indéfini après la reconstruction du webpack CommonsChunkPlugin

J'ai une erreur étrange lorsque vous essayez d'exiger un fichier HTML. Le code en question est une application AngularJs écrite en TypeScript et utilisant 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 est vide.

Désormais, en l'état, commentaires inclus, ce code est construit sans erreur dans Webpack et se déploie à l'aide du serveur de développement Webpack.

Lorsque vous utilisez le serveur Webpack dev, qui vous permet de modifier le code pendant que le serveur est en cours d'exécution et de le recharger en direct, je peux commenter toutes les lignes commentées et tout le reste, et cela fonctionnera correctement. 

Cependant, si j'éteins et reconstruis le serveur dev, il échoue en donnant cette erreur:

Uncaught TypeError: impossible de lire la propriété 'appel' d'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 (fonction anonyme) @ main.bundle.js: 1

échoue à cette ligne dans le webpack: fichier boostrap:

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

Cette erreur se produit lors de la tentative de suppression du commentaire de la ligne app.scss, des lignes du contrôleur ou de la ligne app.html. Cela se produit uniquement après une reconstruction, avec une ou toutes les lignes non commentées.

J'utilise webpack pour construire, et commonjs pour le chargement de module dans tsconfig, et j'ai les chargeurs de webpack suivants dans le fichier webpack.config pour ces types de fichiers:

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

J'utilise angular js et TypeScript depuis un certain temps, mais c'est la première fois que je lance mon propre projet et je suis toujours en train de trébucher dans webpack.

Je suis très confus quant à la raison pour laquelle ce code fonctionnera si je l'insère pendant qu'il est en cours d'exécution, mais cesse ensuite de fonctionner après la reconstruction. Je suppose que cela a quelque chose à voir avec ma configuration de WebPack, mais je suis incapable de le comprendre et je suis coincé dessus depuis un moment. Toute aide serait appréciée.

UPDATE J'ai trouvé la cause, mais pas une solution. Cela semble être causé par CommonsChunkPlugin dans ma config de webpack:

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

Si je supprime le plugin, l'erreur disparaît, mais je n'ai plus ce plugin.

MISE À JOUR 2

Changer l'initialisation du plugin à ceci résout le problème:

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

Mais je ne comprends toujours pas pourquoi

javascriptangularjstypescriptwebpack
8
Kyle

Poster la mise à jour # 2 comme réponse selon la recommandation de Zze.

Changer l'initialisation du plugin à ceci résout le problème:

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

Mais je ne comprends toujours pas pourquoi

0
Kyle

Si vous avez plusieurs fichiers compilés par Webpack chargés sur la même page, ils se écraseront mutuellement. utilisez l'option module.output.library pour définir un "espace de nom" pour votre application.

0
Bart