Webpack-dev-server: sockjs-client updated -> Incompatibile SockJS! Main site uses: "1.1.0", the iframe: "1.0.1"

[Volune]

sockjs-client has been updated two days ago to 1.1.0

When using a fresh install of webpack-dev-server, it now results in the following message in the browser: Incompatibile SockJS! Main site uses: "1.1.0", the iframe: "1.0.1" (I use npm 3.8.6)

Extract of dependencies:

`-- [email protected]
  +-- [email protected]
  +-- [email protected]
  ...

[email protected] by default use [email protected] from a CDN. Maybe webpack-dev-server should pass the option sockjs_url to the SockJS server and so provide the correct version of sockjs-client without relying on a CDN ?

[codycoggins]

Experiencing same issue here.

"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1",

Running an environment based on:
https://github.com/rangle/angular2-redux-starter.git"

[Volune]

I put a fix there: https://github.com/Volune/webpack-dev-server/tree/serve-sockjs-client-v1.14.x
This is based on v1.14.1, let me know if you want a pull request on a specific branch.

[jahe]

I fixed it by overriding the dependent "sockjs-client" module with version 1.0.1 by creating a npm-shrinkwrap.json file next to the package.json with the following content:
{ "dependencies": { "webpack-dev-server": { "version": "1.14.1", "from": "[email protected]", "dependencies": { "sockjs-client": { "version": "1.0.1", "from": "[email protected]" } } } } }

This is kind of a messy solution but it solves the problem.

[SpaceK33z]

Is this still happening? If so, is there are an easy way to reproduce this?

[Volune]

@SpaceK33z Still happening, please see this gist: https://gist.github.com/Volune/a73b956b2ee911b77c3cbcad5699c85d

[SpaceK33z]

@Volune, I tested your gist. It seems like you forgot to include the webpack-dev-server client script, because the websocket does not connect. If I add --inline to the server script, everything works correctly.

[AlexGrrr]

@SpaceK33z I tried the gist with "webpack-dev-server --inline" and it throws the same error - "Incompatible SockJS! Main site uses: "1.1.1", the iframe: "1.0.1""
The iframe references a CDN script.
If you're saying it works, could you post a gist?

[SpaceK33z]

@AlexGrrr, I used that gist too, with --inline. However, it could be that SockJS falls back to another "transporting" mode then websockets. What browser do you use?

EDIT: oh wait, you're using the iframe modus. Let me test that.

[SpaceK33z]

Also tested with the iframe modus (following the steps in the gist exactly this time), but that also seems to work for me. Could you let me know what browser version and OS you're using?

[AlexGrrr]

@SpaceK33z
Thanks for getting back to me.

The OS is windows 7
I tried in many browsers with the same error -
Chrome 52
IE 11
Firefox 47

[SpaceK33z]

@AlexGrrr, okay I think I'm onto the bug.

So in package.json we're including the sockjs-client and sockjs library with a caret (^), which means that a newer version can be used without having to upgrade the dep in webpack-dev-server.

In the client/ folder, we're compiling sockjs-client into a bundle. This uses the latest sockjs-client version when compiling (so when we release a new version of the dev-server).

If a new version of SockJS is released, and you do a fresh npm install, you'll get the new SockJS version (due to the caret). However, since we have bundled sockjs-client in a file, there is now a mismatch of the bundled SockJS version and the SockJS version you have in node_modules.

So having said this, PR #493 would not really fix this issue. It is still possible to have an outdated SockJS version then, because when using the inline modus, it compiles sockjs-client at runtime (it doesn't use the bundled version).

To actually fix this issue, we need to remove the caret from the sockjs-client and sockjs in package.json, and make sure sockjs provides the same version of sockjs-client through the CDN.

[Volune]

@SpaceK33z Can we avoid to rely on an external CDN, which may be slow to respond or unavailable at development time?

[SpaceK33z]

@Volune, hmm, at first I didn't want to do this because this script is only necessary in edge cases, but let's do it. The dev-server shouldn't rely on external scripts. There will need to be a few changes in your PR, but I'll comment over there.

[AlexGrrr]

@SpaceK33z
thanks for your response & quick fix!

in edge cases

You mean the iframe modus is an edge case and usually it should not create the iframe (thus avoiding this issue altogether)? If so, then how can I avoid the iframe mode?

[SpaceK33z]

@AlexGrrr, yes, it should not usually do this. I don't know exactly how to prevent this, but you can take a look at the sockjs documentation (ctrl + f sockjs_url).

[volkanunsal]

Any chance of releasing this fix for Webpack 1?

[yoobit]

any word on this? I updated to webpack 2 and still getting this error.

I tried all the things that were suggested here, including the following. Nothing worked.

https://github.com/webpack/webpack-dev-server/commit/0de52b24a0d0ccc07cb7955679a79ebddc8eb5ec

[arianrhodsandlot]

Hot Module Replacement is still unusable in webpack dev server V1 due to this bug. Will https://github.com/webpack/webpack-dev-server/pull/493 be backported for webpack 1?