Create-react-app: Incompatible SockJS! Main site uses: "1.4.0", the iframe: "1.3.0".

[cuellarj]

Hi there,

I just upgraded to react-scripts v3.2.0 and am now see the below error in the console in my dev server:

Seems the issue is coming from the sockjs-client package. Tracking it down in my package-lock, react-scripts requires webpack-dev-server which in turn requires sockjs-client v1.3.0.
react-scripts also requires react-dev-utils, which requires sockjs-client v1.4.0. I think that's where the mismatch is coming from.

Do you have any advice moving forward?

Thank you.

[EmEmGee]

what's your webserver?

I had this today as well and solved it by adding these 3 lines to my nginx.conf file:

  location / {
    proxy_pass http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;

    # WebSocket support added
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

[cuellarj]

Hey @EmEmGee,

For dev we are using the default webpack dev server with an nginx reverse proxy.
I am now realizing the error only occurs on our hosted dev server (which uses nginx) and not on my local dev server, so your response got me excited. Unfortunately adding the three lines to our nginx.conf file didn't resolve the issue though.

Thanks for your advice on this!

[classic-paul]

I'm also using nginx (to reverse proxy requests to an Apollo server) and am seeing the same issue in the development server only. I also tried using those three lines in the nginx conf to no avail.

[cuellarj]

Update: Had a miscommunication with my back-end dev and those three lines were added outside the location object. The below settings fixed the issue (apologies for poor formatting). Thanks @EmEmGee for your original suggestion!

location / {
proxy_pass our_server;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}

[JLeggatt]

I'm having the same issue but we're not running on nginx.

Can react-scripts bring webpack-dev-server up to a version that depends on sockjs-client v 1.4.0?
As react-dev-utils is depending on sockjs-client v 1.4.0, which is causing this issue for us.

[spathon]

We are having the same issue and are using nginx with same config already.
The only other thing using WS is Apollo subscriptions.

[cuellarj]

I closed this because my issue was resolved via the nginx fix but can reopen if needed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.