TypeError: Cannot read property 'headers' of null at Server.socket.on (***/node_modules/webpack-dev-server/lib/servers/SockJSServer.js:68:32)

[wood1986]

• Operating System: Windows 10
• Node Version: 12.8.1
• NPM Version: 6.10.3
• webpack Version: 4.39.2
• webpack-dev-server Version: since 3.5.0
• Browser: Chrome 76

• This is a bug
• This is a modification request

Expected Behavior

connection should not be null

Actual Behavior

TypeError: Cannot read property 'headers' of null at Server.socket.on (***/node_modules/webpack-dev-server/lib/servers/SockJSServer.js:68:32)

For Bugs; How can we reproduce the behavior?

This bug is difficult to reproduce. It happens occasionally.

webpack-dev-server/lib/servers/SockJSServer.js

Lines 65 to 69 in 2d44ef8

	onConnection(f) {
	this.socket.on('connection', (connection) => {
	f(connection, connection.headers);
	});
	}

line 67 should become

if (connection) {
  f(connection, connection.headers)
}

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Please provide minimum reproducible test repo, i can't reproduce

[knagaitsev]

Seems like an unsolved issue in sockjs sockjs/sockjs-node#121

[alexander-akait]

@Loonride i am thinking we should mark this as bug 😞

[cereallarceny]

I have this issue as well. Here's my webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CopyPlugin([{ from: './*.css', to: './' }]),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

And my package.json:

{
  "name": "with-grid",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline --open",
    "build": "rm -rf dist && webpack --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^5.0.4",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "syft.js": "file:../.."
  }
}

The exact bug report:

/Users/cereallarceny/Dropbox/Development/openmined/code/syft.js/examples/with-grid/node_modules/webpack-dev-server/lib/servers/SockJSServer.js:67
      f(connection, connection.headers);
                               ^

TypeError: Cannot read property 'headers' of null
    at Server.<anonymous> (/Users/cereallarceny/Dropbox/Development/openmined/code/syft.js/examples/with-grid/node_modules/webpack-dev-server/lib/servers/SockJSServer.js:67:32)
    at Server.emit (events.js:203:13)
    at App.emit (/Users/cereallarceny/Dropbox/Development/openmined/code/syft.js/examples/with-grid/node_modules/sockjs/lib/sockjs.js:196:29)
    at /Users/cereallarceny/Dropbox/Development/openmined/code/syft.js/examples/with-grid/node_modules/sockjs/lib/transport.js:111:25
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

OS: Mojave 10.14.6
Browser: Brave (Chrome) - Version 0.67.124 Chromium: 76.0.3809.100 (Official Build) (64-bit)
NPM Version: 6.10.3
Node Version: 12.8.0

We've been running into this issue as well. It's generally very intermittent, but I was able to reproduce it consistently by maxing out the cpu/memory utilization of the machine our app is running on (using a prime95 torture test), then navigating to the app. It only appears to occur when navigating directly to a url, or when refreshing the page.

Checking the console output in chrome shows the following errors:

Invalid Host/Origin header
error @ index.js:169
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:63
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:278
SockJS._transportMessage @ main.js:276
EventEmitter.emit @ emitter.js:50
(anonymous) @ sender-receiver.js:23
EventEmitter.emit @ emitter.js:50
(anonymous) @ polling.js:30
EventEmitter.emit @ emitter.js:50
EventSourceReceiver.es.onmessage @ eventsource.js:21
index.js:172

[WDS] Disconnected!
close @ index.js:172
(anonymous) @ socket.js:26
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:360
nrWrapper @ newrelic.js:369
setTimeout (async)
nrWrapper @ newrelic.js:369
SockJS._close @ main.js:348
SockJS._transportMessage @ main.js:288
EventEmitter.emit @ emitter.js:50
(anonymous) @ sender-receiver.js:23
EventEmitter.emit @ emitter.js:50
(anonymous) @ polling.js:30
EventEmitter.emit @ emitter.js:50
EventSourceReceiver.es.onmessage @ eventsource.js:21
index.js:172

[WDS] Disconnected!
close @ index.js:172
(anonymous) @ socket.js:26
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:360
nrWrapper @ newrelic.js:369
setTimeout (async)
nrWrapper @ newrelic.js:369
SockJS._close @ main.js:348
SockJS._transportClose @ main.js:307
g @ emitter.js:30
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onclose @ websocket.js:49
websocket.js:6

WebSocket connection to 'ws://localhost:7777/sockjs-node/513/fc3v2vie/websocket' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
WebSocketBrowserDriver @ websocket.js:6
WebSocketTransport @ websocket.js:32
SockJS._connect @ main.js:219
SockJS._receiveInfo @ main.js:193
g @ emitter.js:30
EventEmitter.emit @ emitter.js:50
(anonymous) @ info-receiver.js:67
g @ emitter.js:30
EventEmitter.emit @ emitter.js:50
(anonymous) @ info-ajax.js:37
g @ emitter.js:30
EventEmitter.emit @ emitter.js:50
xhr.onreadystatechange @ abstract-xhr.js:124
nrWrapper @ newrelic.js:369

It's also worth mentioning that adding either of the following two bits to our webpack.config.js file resolves the issue if you do what I said above; however, we're still seeing the failure occur in our linux docker containers in CircleCI. Those settings are:

devServer: {
    hot: false,
    inline: false,
    liveReload: false
  },

  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }

[knagaitsev]

@Loonride i am thinking we should mark this as bug

@evilebottnawi Do you mean we should put the fix on master, not next? The core problem is with sockjs but we can at least prevent the TypeError

[rahuls360]

I assume this issue is with webpack-dev-sever@3.8.0

I fixed the issue by removing the ^ symbol from my package.json

"webpack-dev-server": "^3.7.2"
to
"webpack-dev-server": "3.7.2"

Type npm install

Then your issue will be fixed. The caret symbol allows minor releases from the package to be installed. Here we are disabling that and keeping version 3.7.2 (which was working for me earlier)

[alexander-akait]

@Loonride yes, fix should be in master

[alanwhy]

什么时候可以发布新的版本啊，，我要被这个问题搞死了，或者有没有什么其他的解决方法啊，一直在等新的版本出来

什么时候可以发布新的版本啊，，我要被这个问题搞死了，或者有没有什么其他的解决方法啊，一直在等新的版本出来

This has been fixed in their master branch, but not yet released. I too would like a release soon, as it definitely impacts our automation, but in the meantime you can get the fix by pointing your package manager to their master branch. In NPM, that would mean changing the package.json reference to: "webpack-dev-server": "webpack/webpack-dev-server#master".

Hopefully this helps =)

[alanwhy]

什么时候可以发布新的版本啊，，我要被这个问题搞死了，或者有没有什么其他的解决方法啊，一直在等新的版本出来

This has been fixed in their master branch, but not yet released. I too would like a release soon, as it definitely impacts our automation, but in the meantime you can get the fix by pointing your package manager to their master branch. In NPM, that would mean changing the package.json reference to: "webpack-dev-server": "webpack/webpack-dev-server".

Hopefully this helps =)

ok，我对这个不太懂，我现在是降低到3.7.0的版本了，暂时没有问题，而且具体没有研究过vue-cli3初始化的项目为什么package.json中的webpack是一个，，而不是分开的

什么时候可以发布新的版本啊，，我要被这个问题搞死了，或者有没有什么其他的解决方法啊，一直在等新的版本出来

This has been fixed in their master branch, but not yet released. I too would like a release soon, as it definitely impacts our automation, but in the meantime you can get the fix by pointing your package manager to their master branch. In NPM, that would mean changing the package.json reference to: "webpack-dev-server": "webpack/webpack-dev-server".
Hopefully this helps =)

ok，我对这个不太懂，我现在是降低到3.7.0的版本了，暂时没有问题，而且具体没有研究过vue-cli3初始化的项目为什么package.json中的webpack是一个，，而不是分开的

Sorry, Google Translate is failing me here. I'm not sure what you're asking. I will say that if you've found a working version, go with that for now until the team pushes a new one, as the issue is fixed on master, but not yet pushed out. Hopefully they push it soon 🤞

[alanwhy]

什么时候可以发布新的版本啊,,我要被这个问题搞死了，或者有没有什么其他的解决方法啊，一直在等新的版本出来

这已经在他们的主分支中修复，但尚未发布。我也希望尽快发布，因为它肯定会影响我们的自动化，但与此同时，您可以通过将软件包管理器指向其主分支来获得修复。在NPM中，这意味着将package.json引用更改为：“webpack-dev-server”：“webpack / webpack-dev-server”。
希望这有助于=）

OK，我对这个不太懂，我现在是降低到3.7.0的版本了，暂时没有问题，而且具体没有研究过VUE-CLI3初始化的项目为什么的package.json中的的WebPack是一个,,而不是分开的

对不起，谷歌翻译让我失望了。我不确定你在问什么。我要说的是，如果你找到了一个正常工作的版本，那么现在就去使用它，直到团队推出一个新版本，因为问题已在master上修复，但尚未推出。希望他们很快推出它🤞

ok thanks