<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:<br>
"webpack": "^5.74.0",<br>
"webpack-cli": "^4.10.0",<br>
"webpack-dev-middleware": "3.7.3",<br>
"webpack-hot-server-middleware": "^0.6.1",<br>
Node.js version:  16<br>
Operating System:  mac  windows<br>
Additional tools: vscode<br>
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.<br>
error message:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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"><pre class="notranslate"><code class="notranslate">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
</code></pre></div>
<p dir="auto">I think Webpack-hot-Server-middleware is not compatible with Webpack V5. I hope you can upgrade Webpack-hot-Server-middleware。</p>
<p dir="auto">Also, when I use WebPack V5, Webpack-dev-middleware is not upgraded to the highest V5 version, otherwise, res.getHeader is undefined。<br>
I an error making project address: <a href="https://github.com/qq281113270/react-ssr-lazy-loading">https://github.com/qq281113270/react-ssr-lazy-loading</a></p>
<h1 dir="auto">The fix</h1>
<p dir="auto">Clean your <code class="notranslate">dist</code> folder before building (suggestion: use the <code class="notranslate">clean-webpack-plugin</code>)</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">For some reason, having a large number of old builds/files in the <code class="notranslate">dist</code> 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.</p>
<p dir="auto">Running <code class="notranslate">webpack -p</code> dies with out of memory</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory"><pre class="notranslate"><code class="notranslate">FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Have one successful build in the <code class="notranslate">dist</code> folder</li>
<li>Comment out your <code class="notranslate">clean-webpack-plugin</code></li>
<li>Duplicate this bundle a bunch of times</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="for i in {1..50}; do cp dist/index-13ca58.bundle.js &quot;dist/index-$i-13ca58.bundle.js&quot;; done
for i in {1..50}; do cp dist/index-13ca58.bundle.css &quot;dist/index-$i-13ca58.bundle.css&quot;; done
./node_modules/.bin/webpack -p"><pre class="notranslate"><code class="notranslate">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
</code></pre></div>
<ol start="4" dir="auto">
<li>Wait foreverrrr, then observe webpack die</li>
</ol>
<p dir="auto">Here's my config</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// 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&amp;name=[path][name]-[hash:6].[ext]';
const tsLoader = 'ts-loader';
const styleLoader = 'style-loader?sourceMap';
const cssModulesLoader = 'typings-for-css-modules-loader?modules&amp;sass&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]&amp;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) =&gt; [
      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 */"><pre class="notranslate"><code class="notranslate">// 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&amp;name=[path][name]-[hash:6].[ext]';
const tsLoader = 'ts-loader';
const styleLoader = 'style-loader?sourceMap';
const cssModulesLoader = 'typings-for-css-modules-loader?modules&amp;sass&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]&amp;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) =&gt; [
      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 */
</code></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
compilation should be successful</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  <code class="notranslate">^3.8.1</code><br>
Node.js version:  <code class="notranslate">9.11.1</code> and <code class="notranslate">8.9.1</code> (confirmed on both)<br>
Operating System: Ubuntu 14, 2GB of ram, 4GB of swap, running a docker container using image <code class="notranslate">node:9.11.1</code><br>
Additional tools:</p>