未捕获的类型错误：在 webpack 重建 CommonsChunkPlugin 后无法读取未定义的属性“调用”

Posted 2023-03-13

【中文标题】未捕获的类型错误：在 webpack 重建 CommonsChunkPlugin 后无法读取未定义的属性“调用”

【英文标题】：Uncaught TypeError: Cannot read property 'call' of undefined after webpack rebuild CommonsChunkPlugin

【发布时间】：2016-08-06 16:21:51

【问题描述】：

我在尝试要求 html 文件时遇到一个奇怪的错误。有问题的代码是一个用 typescript 编写并使用 webpack 的 AngularJs 应用程序。

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 为空。

现在，包括 cmets，此代码在 webpack 中构建时没有错误，并将使用 webpack 开发服务器进行部署。

使用 webpack 开发服务器时，您可以在服务器运行时更​​改代码并实时重新加载，我可以取消任何/所有注释行的注释，它会正常工作。

但是，如果我关闭开发服务器并重新构建，则会出现此错误：

未捕获的类型错误：无法读取未定义的属性“调用”

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(匿名函数)@main.bundle.js:1

在 webpack:boostrap 文件的这一行失败：

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

尝试取消注释 app.scss 行、控制器行或 app.html 行时会发生此错误。这只发生在重建之后，任何或所有行都未注释。

我使用 webpack 构建，并在 tsconfig 中使用 commonjs 进行模块加载，并且我在 webpack.config 中有以下 webpack 加载器用于这些类型的文件：

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

我使用 angular js 和 typescript 已经有一段时间了，但这是我第一次开始自己的项目，我仍然在 webpack 中磕磕绊绊。

我很困惑为什么如果我在运行时插入该代码会起作用，但在重建后它会停止工作。我认为这与我的 webpack 配置有关，但我无法弄清楚，并且我已经坚持了一段时间。任何帮助将不胜感激。

更新 我找到了原因，但没有解决方案。这似乎是由我的 webpack 配置中的 CommonsChunkPlugin 引起的：

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

如果我删除插件，错误就会消失，但我不再拥有这个插件。

更新 2

将插件初始化更改为此可以解决问题：

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

但我还是不明白为什么

【问题讨论】：

“它会正常工作”，你能定义一下这是什么意思吗？ “正常工作”时的输出是什么？

现在只是一个空白页面，显示以下内容：一条鱼 两条鱼 红鱼 蓝鱼 正在加载...这是一个测试，当它不工作时请保持冷静，它显示 data 正在加载。 .. 所以 angularjs 在第二种情况下停止工作

它可能就像名称一样简单 -> 导致问题的名称

和这个问题有关吗？ github.com/webpack/webpack/issues/1016#issuecomment-182093533

如果它解决了问题，您应该发布更新 2 作为答案，以便人们可以投票等。

【参考方案1】：

如果您在同一页面上加载了多个 webpack 编译的文件，它们将相互覆盖。使用 module.output.library 选项为您的应用定义“命名空间”。

【讨论】：

多重是什么意思？

【参考方案2】：

根据 Zze 的建议发布更新 #2 作为答案。

将插件初始化更改为此可以解决问题：

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

但我还是不明白为什么