Issue 1:
What is the current behavior?

Here is the code I am using :

const mode = process.env.NODE_ENV;

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

const md5 = require('md5');

module.exports = {
publicPath: '/',
outputDir: 'dist',
css: {
extract: mode === 'production'
},

productionSourceMap: mode !== 'production',

chainWebpack: config => {
// remove the prefetch plugin
config.plugins.delete('prefetch')

if(mode === 'production') config.module.rules.delete('eslint');

config.plugin('CompressionPlugin').use(CompressionPlugin);

},

configureWebpack: {
// Define the asset compression properties
optimization: {

minimizer: [
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: [ 'default', { discardComments: { removeAll: true } } ]
}
}),

new TerserPlugin({
parallel: true,
extractComments: {
condition: true,
filename: (fileData) => {
return `${fileData.filename}.LICENSE.txt${fileData.query}`;
},
banner: () => ''
}
})
],

splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/].*\.js$/,
chunks: 'all',
name: module => {

const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

return md5(`npm.${packageName}`)
.substring(0, 8);

}
}
}
}
},
plugins: [
// new BundleAnalyzerPlugin()
]
}

}

This is what I have in package.json

"serve": "rimraf -rf ./node_modules/.cache/vue-loader && node --max_old_space_size=4096 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open",

After running npm run serve, all looks fine. If I hit ctrl+s to save something I changed, it builts again, but exits from terminal with the following error:

const removedModules = records.chunkModuleIds[chunkId].filter(
^
TypeError: Cannot read property 'filter' of undefined

The file that this happens is HotModuleReplacementPlugin.js:272.

What is the expected behavior?

Expected behaviour is that after saving file , it should rebuilt without any errors.

I'd appreciate if you give me the direction of why this happens. Maybe this is solely related to vue-cli doing something in the nutshell.

Other relevant information:

webpack version: Whatever vue-cli-service is using. Vue-cli version is ^4.4.6"

Node.js version: 12.14.1

Operating System: MacOs

Additional tools:

Issue 2:
Bug

HMR is currently throwing the following exception, and crashing the webpack dev server:

error: Uncaught exception, exiting api server. Error TypeError: Cannot read property 'filter' of undefined
at Compilation.<anonymous> (.../node_modules/webpack/lib/HotModuleReplacementPlugin.js:115:43)
at Array.forEach (native)
at Compilation.<anonymous> (.../node_modules/webpack/lib/HotModuleReplacementPlugin.js:111:36)
at Compilation.applyPlugins1 (.../node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:14)
at sealPart2 (.../node_modules/webpack/lib/Compilation.js:622:9)
at Compilation.applyPluginsAsyncSeries (.../node_modules/webpack/node_modules/tapable/lib/Tapable.js:131:46)
at Compilation.seal (.../node_modules/webpack/lib/Compilation.js:575:8)
at .../node_modules/webpack/lib/Compiler.js:488:16
at .../node_modules/webpack/node_modules/tapable/lib/Tapable.js:225:11
at _addModuleChain (.../node_modules/webpack/lib/Compilation.js:477:11)
at processModuleDependencies.err (.../node_modules/webpack/lib/Compilation.js:448:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickDomainCallback (internal/process/next_tick.js:128:9)

This corresponds to this line:

var newModules = currentChunk.modules.filter(...

Webpack is webpack@2.4.1, I'll post my full wepack config at the end.

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

webpack@2.4.1, full config:

{
cache: true,
// debug: true,
devtool: 'inline-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules'],
alias: {
"ag-grid-root": path.resolve(rootDir, 'node_modules/ag-grid/dist')
}
},
node: {
fs: "empty"
},
// noInfo: true, // set to false to see a list of every file being bundled.
entry: [
// must be first entry to properly set public path
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
'./src/index'
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.join(rootDir, 'dist', 'client'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new StatsPlugin('stats.json'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: 'src/templates/index.ejs',
filename: 'index.html',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
}),
new webpack.LoaderOptionsPlugin({
options: {
minimize: false,
debug: true,
noInfo: true,
context: '/',
postcss: [
autoprefixer(),
]
}
})
],
resolveLoader: {
moduleExtensions: ['-loader']
},
module: {
rules: [
{test: /\.jsx?$/, exclude: /node_modules/, use: {loader: 'babel', options: {cacheDirectory: true}}},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'application/font-woff'}}},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'application/octet-stream'}}},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'image/svg+xml'}}},
{test: /\.(jpe?g|png|gif)$/i, use: {loader: 'file', options: {name: '[name].[ext]'}}},
{test: /\.ico$/, use: {loader: 'file', options: {name: '[name].[ext]'}}},
{
test: /\.(css|scss)$/,
use: [
{ loader: 'style' },
{ loader: 'css', query: { sourceMap: true } },
{ loader: 'postcss' },
{ loader: 'sass', options: { includePaths: [stylesDir], sourceMap: true } }
]
}
]
}
}