Unknown WebSocket (SockJS) on Google App Engine - google-app-engine

Question

I've deployed a React app running on NodeJS to the google app engine and everything works well. However, when I load the main page, I get a WebSocket error (failed handshake) that occurs 15s later, probably due to a timeout. The thing is, I don't use SockJS in my app at all so I suspect the app engine makes use of it. Note that this error happens both while loading through HTTP and HTTPS.
It does not break anything but the user can see that the browser is waiting for the page to load entirely, which is bothering.
Why is this socket used? Can I turn it off?
Here is the error stack:
websocket.js:6 WebSocket connection to 'wss://*****.appspot.com/sockjs-node/514/vrdqxoct/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400
WebSocketBrowserDriver # websocket.js:6
WebSocketTransport # websocket.js:32
./node_modules/sockjs-client/lib/main.js.SockJS._connect # main.js:219
./node_modules/sockjs-client/lib/main.js.SockJS._receiveInfo # main.js:193
g # emitter.js:30
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:50
(anonymous) # info-receiver.js:67
g # emitter.js:30
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:50
(anonymous) # info-ajax.js:37
g # emitter.js:30
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:50
xhr.onreadystatechange # abstract-xhr.js:124
EDIT:
As requested, here is my package.json and webpack.config.js.
package.json
{
"name": "*****",
"version": "0.1.0",
"private": true,
"dependencies": {
"bcryptjs": "^2.4.3",
"connected-react-router": "^4.3.0",
"jsonwebtoken": "^8.3.0",
"prop-types": "^15.6.1",
"react": "^16.4.1",
"react-apollo": "^1.4.16",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "1.0.13",
"redux": "^3.7.2",
"redux-form": "^7.4.0",
"redux-logger": "^3.0.6",
"redux-middleware": "^0.1.21",
"redux-thunk": "^2.3.0",
"semantic-ui": "^2.3.1",
"semantic-ui-css": "^2.3.1",
"semantic-ui-less": "^2.3.1",
"semantic-ui-react": "^0.73.1",
"webpack": "^3.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "gcloud app deploy"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"file-loader": "^0.11.2",
"font-loader": "^0.1.2",
"gulp": "^3.9.1"
}
}
webpack.config.js
import path from 'path';
export default {
devtool: 'eval',
entry: './src/index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/',
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/,
include: __dirname
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
}
};
Thanks.

Answer 1

Like I mentioned in the comments, this is due to webpack.
This is the script that runs for react-scripts start start script.
If you look at the code, it internally uses webpack-dev-server. If you find the default config for webpack-dev-server (here), the default config has HOT RELOADING enabled by default. Hence you see socket connections created to enable HOT RELOADING.