Create-react-app: SockJS-Client version mismatch

[holloway]

If you start the dev server and browse to,

/sockjs-node/iframe.html

You'll see the fallback for when a browser can't establish a websocket connection. It references a CDN version of SockJS-Client 1.0.1

<script src="https://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>

But the chosen SockJS-Client version elsewhere in react-dev-tools is 1.0.3 so it fails with this error,

sockjs.min.js:2 Uncaught Error: Incompatibile SockJS! Main site uses: "1.0.3", the iframe: "1.0.1".s

SockJS-Client 1.0.3 was chosen at https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/package.json#L31

If you disable websockets in your browser, or have a proxy that doesn't handle websockets (like I do), you can reproduce this error.

You could fix this by downgrading the package.json to version 1.0.1, or by using a fork of sockjs-node that matches the version you want by applying this patch https://github.com/holloway/sockjs-node/pull/1/commits/6c1a7b6bd68c5c2d5f4e39e3a8567d7d6dd440ea

Incidentally the current version of SockJS-Client is 1.1.1.

[gaearon]

I’m a bit confused, why do you

browse to /sockjs-node/iframe.html

?

This is a bit hidden so I don’t quite understand your use case.

[holloway]

Sorry I was unclear. Browsing to the iframe.html is just a way of seeing the version mismatch for yourself (if websockets fail SockJS-Client attaches an iframe pointing at that url, but as websockets probably work for you then browsing to that url and viewing source will let you see the 1.0.1 vs 1.0.3 version mismatch).

You can reproduce the error yourself by disabling websockets in your browser, and then on the very first page that appears after running npm start you'll get this error:

sockjs.min.js:2 Uncaught Error: Incompatibile SockJS! Main site uses: "1.0.3", the iframe: "1.0.1".s

My use case is trying to integrate create-react-app with a CMS. During development I'm proxying the dev server from the CMS, but the CMS platform can't proxy websockets and I get this error which prevents me getting SockJS features such as reloads.

[gaearon]

Could you submit a fix please if you have one in mind?

[kesuskim]

I experienced the same problem while I set project myself, and I found out downgrading webpack-dev-server will do the job. In my case, I used webpack 1.12.9, webpack-dev-server 1.12.0. Previously I just use latest (both).

[gaearon]

This was presumably fixed by #1274, released in 0.9.0. Please verify and let us know!