Issue 1:
Bug report

What is the current behavior?

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

What is the expected behavior?

Other relevant information:

webpack version:

"webpack": "^5.74.0",

"webpack-cli": "^4.10.0",

"webpack-dev-middleware": "3.7.3",

"webpack-hot-server-middleware": "^0.6.1",

Node.js version: 16

Operating System: mac windows

Additional tools: vscode

I was using webpack webpack-dev-middleware Webpack-hot-server-middleware for Node SSR Webpack-hot-server-middleware Hot updates will report errors in Webpack V5.

error message:

client.8d64ed71.js:55443 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at self.webpackHotUpdatewebpack_demo1 (client.8d64ed71.js:55443:46)
at client.cbbc1ef178f03782094c.hot-update.js:2:38
self.webpackHotUpdatewebpack_demo1 @ client.8d64ed71.js:55443
(anonymous) @ client.cbbc1ef178f03782094c.hot-update.js:2
vendors.8d64ed71.js:29085 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at self.webpackHotUpdatewebpack_demo1 (vendors.8d64ed71.js:29085:46)
at vendors.cbbc1ef178f03782094c.hot-update.js:2:38

I think Webpack-hot-Server-middleware is not compatible with Webpack V5. I hope you can upgrade Webpack-hot-Server-middleware。

Also, when I use WebPack V5, Webpack-dev-middleware is not upgraded to the highest V5 version, otherwise, res.getHeader is undefined。

I an error making project address: https://github.com/qq281113270/react-ssr-lazy-loading

Issue 2:
The fix

Clean your dist folder before building (suggestion: use the clean-webpack-plugin)

Bug report

What is the current behavior?

For some reason, having a large number of old builds/files in the dist folder will cause webpack to run out of memory and die during compilation. I don't understand why webpack would be interacting with these files or why this matters, but it does.

Running webpack -p dies with out of memory

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

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

Have one successful build in the dist folder

Comment out your clean-webpack-plugin

Duplicate this bundle a bunch of times

for i in {1..50}; do cp dist/index-13ca58.bundle.js "dist/index-$i-13ca58.bundle.js"; done
for i in {1..50}; do cp dist/index-13ca58.bundle.css "dist/index-$i-13ca58.bundle.css"; done
./node_modules/.bin/webpack -p

Wait foreverrrr, then observe webpack die

Here's my config

// webpack.config.js
/* eslint-disable import/no-commonjs */
const fs = require('fs');
const path = require('path');
const process = require('process');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

const isProd = process.env.NODE_ENV === 'production';

const distDirName = 'dist';

const sharedPlugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['index'],
template: './index.html',
favicon: './favicon.ico',
inject: true,
}),
];
const prodPlugins = [
// new CleanWebpackPlugin(distDirName),
...sharedPlugins,
new ExtractTextPlugin('[name]-[hash:6].bundle.css'),
];
const devPlugins = [
...sharedPlugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
filename: 'tests.html',
chunks: ['tests'],
template: './tests.html',
inject: true,
}),
];

const prodEntry = { index: ['index.tsx'] };
const devEntry = { ...prodEntry, tests: ['tests.ts'] };

const rhlBabelLoader = {
loader: 'babel-loader',
options: {
plugins: [
'react-hot-loader/babel',
],
},
}
const urlLoader = 'url-loader?limit=16384&name=[path][name]-[hash:6].[ext]';
const tsLoader = 'ts-loader';
const styleLoader = 'style-loader?sourceMap';
const cssModulesLoader = 'typings-for-css-modules-loader?modules&sass&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&banner=// This file automatically generated by typings-for-css-modules-loader';
const cssLoader = 'css-loader';
const postCssLoader = {
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('autoprefixer')(),
],
sourceMap: true,
},
};
const sassLoader = 'sass-loader?sourceMap';

module.exports = {
context: path.resolve(__dirname),

entry: isProd ? prodEntry : devEntry,

output: {
publicPath: '/', // Where you uploaded your bundled files. (Relative to server root)
path: path.resolve(__dirname, distDirName), // Local disk directory to store all your output files (Absolute path)
filename: '[name]-[hash:6].bundle.js',
},

module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [path.resolve(__dirname, 'node_modules')],
use: isProd ? [tsLoader] : [rhlBabelLoader, tsLoader],
},
{
test: /\.(png|jpg|gif)$/,
use: [urlLoader]
},
{
test: /\.(s*)css$/,
include: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'styles')],
use: isProd
? ExtractTextPlugin.extract({ use: [cssLoader, postCssLoader, sassLoader], fallback: styleLoader })
: [styleLoader, cssLoader, postCssLoader, sassLoader],
},
{
test: /\.(s*)css$/,
include: [path.resolve(__dirname, 'components')],
use: isProd
? ExtractTextPlugin.extract({ use: [cssModulesLoader, postCssLoader, sassLoader], fallback: styleLoader })
: [styleLoader, cssModulesLoader, postCssLoader, sassLoader],
},
],
},

resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '*'],
modules: [
path.join(__dirname, ''),
path.join(__dirname, 'node_modules'),
],
},

devServer: {
publicPath: '/', // URL path where the webpack files are served from
contentBase: path.join(__dirname, distDirName), // A directory to serve files non-webpack files from
host: '0.0.0.0',
port: process.env.PORT,
disableHostCheck: true,
hot: true,
inline: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/,
},
historyApiFallback: true,
},

plugins: isProd ? prodPlugins : devPlugins,
};
/* eslint-enable import/no-commonjs */

What is the expected behavior?

compilation should be successful

Other relevant information:

webpack version: ^3.8.1

Node.js version: 9.11.1 and 8.9.1 (confirmed on both)

Operating System: Ubuntu 14, 2GB of ram, 4GB of swap, running a docker container using image node:9.11.1

Additional tools: