Webpack-dev-server: ReactJS dev server crashing after upgrade from 3.10.3 to 3.11.0

[silversonicaxel]

• 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)

• [x] 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?

[alexander-akait]

Can't reproduce, can you create reproducible test repo?

[silversonicaxel]

eh .... I know you would have asked for it.
Unluckily I'm not sure what I can do. The project has copyright on its core codebase so I can't share the real repo, and it is not the smallest project ever. It might take a while to recreate a repo, hopefully with an error, cleaned from its private dependencies. I will investigate a bit more on what I could do. But I can't promise anything.

[alexander-akait]

@silversonicaxel Please try to do this, without this I will not be able to help and the issue will be closed after a while.

[alexander-akait]

I can't find related changes for 3.11.0 to the error

[lkloeppel]

We're facing the same problem in our frontends (Same situation with being unable to share the code.)

I tried a lot in the last day and it seems like the error is related to the package update of sock-js. When I pin the resolution in my package.json to "sockjs" : "0.3.19" the error is gone, when I remove the resolution the error is back within a few page reloads.

"resolutions": {
   "sockjs" : "0.3.19"
  },

@silversonicaxel Are you able to reproduce the fix on your side as well?

[alexander-akait]

Maybe somebody provide stack trace/screenshots?

[silversonicaxel]

I can confirm what @lkloeppel said. Once I set in my package.json that resolution related to the library sockjs the server doesn't crash anymore.

[alexander-akait]

To be honestly I don't know why it is happens, we don't change sockjs version in 3.11.0, if someone provides at least a screenshot, it will help to find a place

[silversonicaxel]

Even setting in webpack configuration:

  stats: {
    logging: true,
    loggingTrace: true
  },

the only error I have is the one I already provided and it is in the console:

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.

The browser just shows network errors as soon as the server crashes:

GET http://localhost:3000/static/media/assets/PRIVATE-FONT.d9f3b9dc.woff net::ERR_CONNECTION_REFUSED

[alexander-akait]

@silversonicaxel Do you use https? Very weird problem. Can you try add here https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L704:

connection.on('error', (error) => {
  console.log(error);
});

[silversonicaxel]

I must say, it is not triggered here the error, so the console.log(error); command is not executed. Checking somewhere else in the file where the error could occur and eventually tell you the outcome.

[alexander-akait]

@silversonicaxel Maybe you can create private repo? If you need I can sign NDA

[silversonicaxel]

I really can't do it. Having issue on understanding what is the error... Still on it.

[silversonicaxel]

I can't reproduce it on a new empty repository based on the as much as similar package.json and webpack configurators.

[alexander-akait]

@silversonicaxel Sorry, I can't reproduce it too, and without reproducible test repo I can't help, maybe problem on CRA side, for example in react-dev-utils/webpackHotDevClient

[silversonicaxel]

mmmm I will try also to go in that direction. any news from you @lkloeppel ?

[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)

[silversonicaxel]

It works also in my project.
It seems it is something related to sockjs upgrade that actually happened with the release webpackDevServer 3.11.0.
Also confirmed by the resolution here => https://github.com/webpack/webpack-dev-server/issues/2628#issuecomment-633948254
Using ws instead of sockjs issue disappears as mentioned here => https://github.com/webpack/webpack-dev-server/issues/2628#issuecomment-634475007

As a recap:

webpackDevServer 3.10.3 => sockjs 0.3.19 (2020-02-05)
https://github.com/webpack/webpack-dev-server/releases/tag/v3.10.3

upgrade in package.json of sockjs (2020-03-18)
https://github.com/webpack/webpack-dev-server/pull/2450/files

webpackDevServer 3.11.0 => sockjs 0.3.20 (2020-05-08)
https://github.com/webpack/webpack-dev-server/releases/tag/v3.11.0

I would consider the issue closed. Thanks everyone for the support.

[alexander-akait]

Anyway somebody can reproduce a problem? Will be great to fix it anyway :smile:

[silversonicaxel]

In case, I would reopen the issue. But I also was not able to have a clean repo with the error.

[gabrieledarrigo]

Ciao @evilebottnawi, we had the same problem upgrading from 3.10.3 to 3.11.0.
The fix proposed by @lkloeppel seems to work! ❤️

[alexander-akait]

@gabrieledarrigo Can you create reproducible test repo?

[juhana]

I had this same problem with an ejected create-react-app project. The fix was to create a new project with the latest create-react-app and get the clean versions of the scripts/start.js file and the configuration files from the config directory. So for me it seemed to be just a matter of remembering to update the config files as well as the npm package in an ejected project.

If you want to take a look, the project that behaves exactly as described in the original post (3.11.0 package, 3.10.3 config): https://github.com/vorple/borogove-ide/tree/679be38db4887ec4e8464eb2e37153f1d5e8498d

Fixed after updating config files: https://github.com/vorple/borogove-ide/tree/1014e9063700cc5e5b4518f87fc364c5453f9ad6 (diff)

[alexander-akait]

@juhana thanks for information

[alexander-akait]

@Slapbox Maybe video/screenshot?

[alexander-akait]

Yep, bug in sockjs, and unfortunately we cannot fix it, anyway new version is using ws by default, so no problems, for v3 you can use this workaround https://github.com/webpack/webpack-dev-server/issues/2628#issuecomment-634521675

[Slapbox]

v4.0.0-beta.1 is released after nearly 4 months!?

[alexander-akait]

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