ReactJS dev server crashing after upgrade from 3.10.3 to 3.11.0

• Operating System: macOs 10.14.6
• Node Version: v12.13.0
• NPM Version: 6.12.0
• webpack Version: 4.43.0
• webpack-dev-server Version: 3.11.0
• Browser: Opera Developer Version:70.0.3693.0 / Chrome Version 81.0.4044.138 (Official Build) (64-bit) / Safari Version 13.1 (14609.1.20.111.8)

• This is a bug
• This is a modification request

Code

// webpack.config.js

'use strict'

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const getClientEnvironment = require('./env')
const paths = require('./paths')
const { getDevAssetPathPlugin } = require('../assets-path-compatibility')

const publicPath = '/'
const publicUrl = ''
const env = getClientEnvironment(publicUrl)

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  entry: [
    '@babel/polyfill',
    require.resolve('./dom-polyfill'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs
  ],
  output: {
    pathinfo: true,
    filename: 'static/js/bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
  },
  resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: [ /* ... */  ],
    alias: { /* ... */ }
  },
  module: {
    strictExportPresence: true,
    rules: [
      {
        oneOf: [
          {
            test: /\.(js|jsx|ts|tsx|mjs)$/,
            exclude: /(node_modules)/,
            use: {
              loader: 'babel-loader'
            }
          },
          {
            test: /\.css$/,
            use: [
              {
                loader: 'style-loader'
              },
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  config: {
                    path: /* ... */
                  },
                  sourceMap: true
                }
              }
            ]
          },
          {
            test: /\.scss$/,
            loader: 'sass-extract-loader',
            options: {
              plugins: ['compact']
            },
            include: [ /* ... */ ]
          },
          {
            test: /\.scss$/,
            use: [
              {
                loader: 'style-loader'
              },
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  config: {
                    path: /* ... */
                  },
                  sourceMap: true
                }
              },
              {
                loader: 'sass-loader',
                options: {
                  sassOptions: {
                    includePaths: [ /* ... */ ],
                    outputStyle: 'expanded'
                  },
                  sourceMap: true
                }
              }
            ]
          },
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: '/* ... */[name].[hash:8].[ext]'
                }
              }
            ]
          },
          {
            test: /\.svg$/,
            loader: 'raw-loader',
            include: [ /* ... */ ]
          },
          {
            test: /\.md$/,
            use: [
              {
                loader: 'html-loader'
              },
              {
                loader: 'markdown-loader'
              }
            ]
          },
          {
            exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss/],
            loader: 'file-loader',
            options: { /* ... */ }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: /* ... */
    }),
    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
    new webpack.DefinePlugin(env.stringified),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new CaseSensitivePathsPlugin(),
    new StyleLintPlugin(),
    getDevAssetPathPlugin()
  ],
  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  performance: {
    hints: false
  }
}

Expected Behavior

Server keeps up and running as it always does

Actual Behavior

After the upgrade of the library webpack-dev-server from 3.10.3 to 3.11.0 the server randomly crashes as soon as I reload it few times, with this error as output

Compiled successfully!

You can now view toolkit in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.178.45:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

events.js:187
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:201:27)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: 'ECONNRESET',
  code: 'ECONNRESET',
  syscall: 'read'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

• it crashes when I give the command yarn start
• it crashes if I reload the page with CMD+R
• it crashes if I reload the page pressing enter of the URL of my localhost

For Bugs; How can we reproduce the behavior?

In my project, once the server is launched the error appears after in the following scenario:

• doing nothing, means that as soon as server is up and running, the crash happens immediately
• I refresh the page of my local server with the buttons CMD+R
• I refresh the page of my local server pressing ENTER in the URL of my localhost

For Features; What is the motivation and/or use-case for the feature?

[lkloeppel]

Unfortunately no progress on reproducing the error with a clean ejected CRA application. It seems like our ejection has moved too far away from the current CRA ejection. (Ieek!).

But anyway I was able to change the configuration for our code to get rid of the crashing.

In the webpackDevServer.config.js file I added

 // Use 'ws' instead of 'sockjs-node' on server since we're using native
 // websockets in `webpackHotDevClient`.
 transportMode: 'ws',
 // Prevent a WS client from getting injected as we're already including
 // `webpackHotDevClient`.
 injectClient: false,

to the configuration, which is also per default enabled in the latest CRA eject. This seems to solve the problems for all our repositories. (No errors so far today)

[alexander-akait]

Yep, we have a lot of issue for webpack v5 😞 But now most of them resolved, so I can focus on webpack-dev-server fully