vendors.js: Uncaught TypeError: Cannot read property 'apply' of undefined while using webpack

Question

这发生在热模块重新加载或刷新时。不知道为什么会这样。我必须重新启动构建过程以再次 bootstrap 应用程序。

一切正常，直到重新加载 2 个热模块，然后构建因错误而中断

vendors.js: Uncaught TypeError: Cannot read property 'apply' of undefined while using webpack

下面是我的配置文件：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');
module.exports = {
  'devtool': 'eval-source-map',

  'entry': {
    'vendor': [
      'react',
      'react-dom',
      'react-router',
      'react-redux',
      'redux-thunk',
      'react-bootstrap',
      'redux',
      'redux-form',
      'axios'
    ],
    'app':  __dirname + '/src/main.js'
  },
  'output': {
    'path': __dirname + '/build',
    'publicPath': '/',
    'chunkFilename': '[id].[name].chunk.js',
    'filename': '[name].[hash].js'
  },

  'module': {
    'loaders': [
      // JSX and JS transpilation using babel
      {
        'test': [/\.js$/, /\.jsx$/],
        'exclude': /(node_modules|bower_components)/,
        'loader': 'babel'
      },
      // SASS modularization using style, css and postcss sass loader
      {
        'test': [/\.css$/, /\.scss$/],
        'loader': 'style!css!sass'
      },
      // Font path loader
      {
        'test': /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        'loader': 'file-loader?name=fonts/[name].[ext]'
      },
      // Image path loader
      {
        'test': /\.(jpe?g|png|gif|svg)$/i,
        'loaders': [
          'url-loader?limit=15000&name=images/[name].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ],
  },

  'sassLoader': {
    'includePaths': [
      path.resolve(__dirname, 'src/components/'),
      path.resolve(__dirname, 'src/components/common/assets/')
    ]
  },

  'resolve': {
    'root': [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'src/components/common/assets/'),
      path.resolve(__dirname, 'src/components/common/'),
      path.resolve(__dirname, 'node_modules')
    ],
    'extensions': ['', '.js', '.jsx', '.scss'],
  },

  'plugins': [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.BannerPlugin("App has been developed by Company."),
    new HtmlWebpackPlugin({
      'template': __dirname + '/src/index.tmpl.html'
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendors.js', Infinity),
    new VendorChunkPlugin('vendor'),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      'minimize': true,
      'screw-ie8': true,
      'mangle': false,
      'compress': {
        'warnings': false
      },
      'output': {
        'comments': false,
        'semicolons': true,
      }
    }),
    new webpack.optimize.DedupePlugin()
  ],

  'devServer': {
    'contentBase': './build',
    'host': '0.0.0.0',
    'https': true,
    'colors': true,
    'compress': true,
    'hot': true,
    'historyApiFallback': true,
    'inline': true,
    // Display only errors to reduce the amount of output.
    'stats': 'errors-only',
  }
};

我找不到太多关于这个错误的信息。我也清除了浏览器缓存并删除了所有 cookie，但无济于事。

我也检查了 vendor.js 文件。它被缩小了，但我可以看到它破坏了热模块重新加载功能。任何帮助将非常感激。感谢期待。

Answer 1

这些是一些答案，我从 webpack 的 github 仓库中读到：

Remove CommonsChunkPlugin. However,bundle sizes increase.

或

Add cache: false

或

Remove dedupe plugin while in development

目前，这是唯一的解决方案。希望 webpack 尽快解决这个问题。

Webpack Issue 959

Answer 2

我最近遇到了这个问题，并通过将 chunksSortMode: 'dependency', 添加到我的 HtmlWebpackPlugin 配置中来修复它。我不确定 为什么 它有效，但显然在分块过程中有些东西出了问题。添加它增加了我的构建时间，但它解决了问题，所以我接受它。

在您的情况下，您的 HtmlWebpackPlugin 将看起来像这样进行更改：

new HtmlWebpackPlugin({
      chunksSortMode: 'dependency',
      'template': __dirname + '/src/index.tmpl.html'
    }),

vendors.js: Uncaught TypeError: Cannot read property 'apply' of undefined while using webpack

vendors.js: Uncaught TypeError: Cannot read property 'apply' of undefined while using webpack

javascript

reactjs

webpack

webpack-dev-server

webpack-hmr