WebSocket connection to 'ws://localhost:4000/sockjs-node/612/2pdjfv15/websocket' failed: Connection closed before receiving a handshake response error

Question

I'M using Browser Sync with webpack-dev-server, And facing the issue while using browser sync..!! only form fill up is working, click, scroll is not working in browser sync, and there is no any compile time error occurring, But above things are not working..!! Here is my "Webpack.dev.js" file, So what is wrong over here..?

const helpers = require('./helpers'); const buildUtils = require('./build-utils'); const webpackMerge = require('webpack-merge');  const commonConfig = require('./webpack.common.js');  const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin'); const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin'); const BrowserSyncPlugin = require('browser-sync-webpack-plugin');  module.exports = function (options) {   const ENV = process.env.ENV = process.env.NODE_ENV = 'development';   const HOST = process.env.HOST || 'localhost';   const PORT = process.env.PORT || 3000;    const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {     host: HOST,     port: PORT,     ENV: ENV,     HMR: helpers.hasProcessFlag('hot'),     PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT   });    return webpackMerge(commonConfig({ env: ENV, metadata: METADATA  }), {      output: {         path: helpers.root('dist'),         filename: '[name].bundle.js',         sourceMapFilename: '[file].map',         chunkFilename: '[id].chunk.js',        library: 'ac_[name]',       libraryTarget: 'var',     },      module: {        rules: [           {           test: /\.css$/,           use: ['style-loader', 'css-loader'],           include: [helpers.root('src', 'styles')]         },          {           test: /\.scss$/,           use: ['style-loader', 'css-loader', 'sass-loader'],           include: [helpers.root('src', 'styles')]         },        ]      },      plugins: [       new EvalSourceMapDevToolPlugin({         moduleFilenameTemplate: '[resource-path]',         sourceRoot: 'webpack:///'       }),         new NamedModulesPlugin(),         new LoaderOptionsPlugin({         debug: true,         options: { }       }),        new BrowserSyncPlugin({         // browse to http://localhost:3000/ during development,         host: 'localhost',         port: 4000,         proxy: 'http://localhost:3000'       },       {         reload: false       })     ],      devServer: {       port: METADATA.port,       host: METADATA.host,       hot: METADATA.HMR,       public: METADATA.PUBLIC,       historyApiFallback: true,       watchOptions: {          ignored: /node_modules/       },        setup: function(app) {         // For example, to define custom handlers for some paths:         // app.get('/some/path', function(req, res) {         //   res.json({ custom: 'response' });         // });       },     },      node: {       global: true,       crypto: 'empty',       process: true,       module: false,       clearImmediate: false,       setImmediate: false,       fs: 'empty'     }    }); }; 

Answer 1

I've had this occur recently with Angular 11 (Ivy). The solution should be relevant to webpack-dev-server in general -- since this is an identical behavior.

The issue occurs when when load the webpack-dev-server application is loaded on a separate webserver endpoint. The sockjs-node connection thinks that it needs to use an absolute url relative to the web root -- which won't work since your webserver root is pointing to a different process/port/host than the dev webserver.

I scoured the interwebs for what CLI or property to set to override the base that it uses -- I haven't found anything (yet!)

Solution: Build your project each time you make changes and test it. Generally a non-production build only takes a minute, so it's not bad.