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

Question

This occurs on hot module reload or refresh. Not sure why it's happening. I have to restart the build process to bootstrap the app again.

Everything works fine until 2 hot module reloads and then the build breaks with the error

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

Below is my config file:

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',
  }
};

I couldn't find much about this bug. I have also cleared my browser cache and deleted all the cookies but to no avail.

I have also checked the vendor.js file. It's minified, but I can see it breaking on the hot module reload function. Any help would be much appreciated. Thanks in anticipation.

Answer 1

These are some of the answers, I read from the webpack's github repo:

Remove CommonsChunkPlugin. However,bundle sizes increase.

OR

Add cache: false

OR

Remove dedupe plugin while in development

For now, this is the only solution. Let's hope that webpack fixes this issue soon.

Webpack Issue 959