React webapp keep loading local host resources in PROD env - node.js

Question

I've deployed my react-js based web app to prod environment, and from the browser console, I can see there's some dependency code stuck in an endless loop trying to load some socketjs-node resources from local host through xhr. Here's the message I got from browser console:
abstract-xhr.js:132 Mixed Content: The page at '[MY_WEBSITE_ADDRESS]' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:3000/sockjs-node/info?t=1469401504944'. This request has been blocked; the content must be served over HTTPS.o._start # abstract-xhr.js:132(anonymous function) # abstract-xhr.js:21
abstract-xhr.js:132 XMLHttpRequest cannot load http://localhost:3000/sockjs-node/info?t=1469401504944. Failed to start loading.o._start # abstract-xhr.js:132(anonymous function) # abstract-xhr.js:21
client:70 [WDS] Disconnected!l.onclose # client:70n.dispatchEvent # eventtarget.js:51(anonymous function) # main.js:356
I am wondering if I missed any prod setting when building my js bundle. I am using webpack and here's the setting for compiling prod bundle js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index',
'whatwg-fetch'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}]
}
};
and here are the dependencies I am using:
"devDependencies": {
"babel-core": "^6.0.20",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"eslint": "^1.10.3",
"eslint-plugin-react": "^3.6.2",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"async": "^1.5.2",
"express": "^4.13.4",
"mixpanel": "^0.4.0",
"mixpanel-browser": "^2.8.1",
"radium": "^0.17.1",
"react": "^0.14.6",
"react-autosuggest": "^3.8.0",
"react-bootstrap": "^0.29.4",
"react-cookie": "^0.4.7",
"react-dom": "^0.14.6",
"react-ga": "^2.1.0",
"react-geosuggest": "^1.23.0",
"react-router": "^2.4.1",
"whatwg-fetch": "^1.0.0"
}
I don't see abstract-xhr.js is checking any explicit flag when initiating this query. Please share some thoughts. Thanks!

Answer 1

I fixed it by removing this line from Entry property in webpack config.
'webpack-dev-server/client?http://localhost:3000',