Failed to construct 'WebSocket': The URL '[object Object]' is invalid
<p>I was trying to make a connection to the websocket and get the data in react router. The connection is not happening and getting error <code>Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid.</code> in the browser console. Using <code>npm start</code> from the terminal to start the application. It is a simple react router application. Below is the react code where I think  problem occurred. </p>

<pre><code>import React from 'react'

export default React.createClass({
  getInitialState: function() {
     return { value : [],
                  client : '' };
  },

   componentWillMount: function() {
      client = new WebSocket("ws://localhost:8000/","echo-protocol");
      client.onerror = function() {
           console.log('Connection Error');
       };

        client.onopen = function() {
          function sendNumber() {
               if (client.readyState === client.OPEN) {
                   var number = Math.round(Math.random() * 0xFFFFFF);
                   client.send(number.toString());
                   setTimeout(sendNumber, 1000);
               }
           }
           sendNumber();
       };

    client.onmessage = function(e) {
            this.setState({
                value: e.data
            });
        }.bind(this);
    },

    componentWillUnmount: function(){
        client.close();
    },

    render: function() {
        return (React.createElement("div",null,this.state.value))
    }
 });
</code></pre>

<p>The webpack config file is - </p>

<pre><code>module.exports = {
  entry: './index.js',

  output: {
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&amp;presets[]=react' }
    ]
  }
}
</code></pre>

<p>Also, the packge.json file is </p>

<pre><code>{
  "name": "react_form",
  "version": "1.0.0",
  "description": "Sample form that uses React for its rendering",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
  },
  "author": "J",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "websocket": "^1.0.23"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}
</code></pre>

<p>If any other piece of code is required then please let me know. Also, please find the image of the error coming in the console on selecting the route option. <a href="https://i.stack.imgur.com/C6W50.png" rel="noreferrer"><img src="https://i.stack.imgur.com/C6W50.png" alt="Image"></a> What is the exact issue I am not able to get ? </p>