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

Created on 16 Aug 2019 · 27Comments · Source: webpack/webpack-dev-server

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

[X] 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.

https://github.com/webpack/webpack-dev-server/blob/2d44ef8088db2312516274cc2d5edda348064712/lib/servers/SockJSServer.js#L65-L69

line 67 should become

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

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

Source

wood1986

👍6 😕2

Most helpful comment

@Loonride i am thinking we should mark this as bug :disappointed:

alexander-akait on 16 Aug 2019

👍9 ❤4

All 27 comments

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

alexander-akait on 16 Aug 2019

Seems like an unsolved issue in sockjs https://github.com/sockjs/sockjs-node/issues/121

Loonride on 16 Aug 2019

@Loonride i am thinking we should mark this as bug :disappointed:

alexander-akait on 16 Aug 2019

👍9 ❤4

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

cereallarceny on 18 Aug 2019

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

nekoassassin on 20 Aug 2019

👍2

@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

Loonride on 20 Aug 2019

I assume this issue is with [email protected]

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)

rahuls360 on 20 Aug 2019

@Loonride yes, fix should be in master

alexander-akait on 20 Aug 2019

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

alanwhy on 29 Aug 2019

👎13

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

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 =)

nekoassassin on 29 Aug 2019

👍1

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

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是一个，，而不是分开的

alanwhy on 29 Aug 2019

👎10

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

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 🤞

nekoassassin on 29 Aug 2019

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

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

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

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

ok thanks

alanwhy on 29 Aug 2019

Does anyone have any further information on the release schedule to resolve this?

hcharley on 4 Sep 2019

👍2

stumbled upon this issue as this actually occurs randomly for me when using ng serve

Angular CLI: 8.3.3
Node: 10.16.2
OS: win32 x64
Angular: 8.2.5

rwlnd on 5 Sep 2019

👍3

Getting the exact same problem:

i ?wdm?: Compiled successfully.
C:\inetpub\wwwroot\storm\node_modules\webpack-dev-server\lib\servers\SockJSServer.js:67
      f(connection, connection.headers);
                               ^

TypeError: Cannot read property 'headers' of null
    at Server.socket.on (C:\inetpub\wwwroot\storm\node_modules\webpack-dev-server\lib\servers\SockJSServer.js:67:32)
    at emitOne (events.js:116:13)
    at Server.emit (events.js:211:7)
    at App.emit (C:\inetpub\wwwroot\storm\node_modules\sockjs\lib\sockjs.js:196:29)
    at C:\inetpub\wwwroot\storm\node_modules\sockjs\lib\transport.js:111:25
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `ng serve --deploy-url /`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cus\AppData\Roaming\npm-cache\_logs\2019-09-05T01_36_00_737Z-debug.log

Windows Server 2012 R2

Angular CLI: 7.3.9
Node: 8.12.0
OS: win32 ia32
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-ng-packagr 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 7.3.9
@angular/cdk 6.4.7
@angular/cli 7.3.9
@angular/material 6.4.7
@angular/material-moment-adapter 6.4.7
@ngtools/webpack 6.0.8
@schematics/angular 7.3.9 (cli-only)
@schematics/update 0.13.9 (cli-only)
ng-packagr 5.4.3
rxjs 6.5.2
typescript 2.8.4
webpack 4.8.3

gotnull on 5 Sep 2019

"webpack-dev-server": "webpack/webpack-dev-server"

I don't know what you mean by this. There's no such thing as an npm package at webpack/webpack-dev-server

gotnull on 5 Sep 2019

👍1

I see this issue intermittently when running an Angular app from a VS Code terminal. If I close VS Code and run it from a normal cli, I don't seem to ever see it...

collinbarrett on 5 Sep 2019

👍2

"webpack-dev-server": "webpack/webpack-dev-server"

I don't know what you mean by this. There's no such thing as an npm package at webpack/webpack-dev-server

Apologies, I omitted the #master portion in my comment. I updated the comment, but just for clarity's sake, it should be:
"webpack-dev-server": "webpack/webpack-dev-server#master"
This will point you to the current master branch, instead of any released version.

nekoassassin on 5 Sep 2019

@cereallarceny try adding the following in your webpack.config.js:
devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000 },

I was having the same issue and this seemed to resolve it.

jtrump70 on 6 Sep 2019

👍3

@jtrump70 it's really works, and there's one thing should be noticed is that you should confirm that's not another server(port 3000) which you run before, you can change another port to test it

chenhailun2006 on 12 Sep 2019

The fix is released! Seems to be working for me so far, give it few days though...

Harmonickey on 16 Sep 2019

👍4 🎉1

I still don't see a fix. Any workaround?

iyer24 on 1 Oct 2019

@iyer24 update your deps and lock file

alexander-akait on 1 Oct 2019

@iyer24 update your deps and lock file

Sorry, how would I go about doing that?

Willem-Merwe on 1 Oct 2019

npm update/yarn upgrade (hardcore: rm -r node_modules, rm -r package-lock.json/rm -r yarn.lock and npm i/yarn install)

Please read how to use package manager

alexander-akait on 1 Oct 2019

👎3

I got this error when doing npm start.

I closed vlcplayer and did npm start again, and the problem went away.

once the app is running, i can run vlc player again.

this is most likely an issue with some application opening a port that either sockjsserver wants to open, or does not respond correctly to sockjsserver connection.

so close all unnecessary apps. alternatively sockjsserver people should report which port they tried to open and what they tried to do, so developers can more effectively close the offending applications.