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'
    }

  });
};