React-native: Somewhere between 0.0.55 and 0.0.57, socket.io stops working

[noahprince22]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Last working version:

react-native info
Environment:
  OS: macOS Sierra 10.12.6
  Node: 8.10.0
  Yarn: 1.6.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
  react-native: 0.55.x => 0.55.4

Broken version:

  React Native Environment Info:
    System:
      OS: macOS Sierra 10.12.6
      CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 228.90 MB / 16.00 GB
      Shell: 5.2 - /bin/zsh
    Binaries:
      Node: 8.10.0 - /usr/local/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
      Android SDK:
        Build Tools: 19.1.0, 23.0.1, 23.0.2, 25.0.2, 26.0.2, 27.0.3, 28.0.0, 28.0.3
        API Levels: 15, 23, 25, 26, 27
    IDEs:
      Android Studio: 3.0 AI-171.4443003
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
      react-native: 0.57.x => 0.57.4
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-workers: 0.3.1

Description

Websocket connections time out on 0.0.57. I made an issue in socket.io, but after switching through react-native versions, it's clearly a react native issue. https://github.com/socketio/socket.io-client/issues/1245 for an example socketio setup.

It doesn't seem to be the iPhone X simulator, which in 0.0.57 is the default, but in older versions is not. The iPhoneX simulator runs sockets just fine in the older versions.

It might be babel, as it seems there was an upgrade to babel between these versions.

[emech-en]

I have the same issue.

Working on 0.55 and not working on 0.56 and 0.57.4 react-native versions

[wilztan]

Is there any alternative to fix this issues? since the I also unable to use socket.io since 0.57.4?

[csotiriou]

I am on react native 0.57.3 and it is working fine. On react native 0.57.4 and thenon, socket.io is broken.

Something happened in those commits between those two versions, or in Babel in the meantime.

[csotiriou]

Update: Using Haul seemed to fix the issue - another indication that something is wrong with the bundler or Babel

[csotiriou]

It's still broken in React Native 0.57.7

[doostin]

I have the same issue. Interestingly, it works fine when you are running your app while debugging remotely, but as soon as you turn off "debug js remotely", it stops working.

[noahprince22]

@doostin When you debug remotely, I believe the JS runs in Chrome's javascript engine. My guess is the issue lies in the native engine, which is why you're not seeing it in debug.

[bgoyal2222]

same issue I am facing in 0.57.7
transports: ['websocket'] is not working
'polling' works

[firofame]

do we have any workarounds?

[bgoyal2222]

Tried "socket.io-client": "2.0.4" it worked for me

[khloukrada]

Tried "socket.io-client": "2.0.4" it worked for me

This works very well. Thanks @bgoyal2222

[svrsreeraj]

Tried "socket.io-client": "2.0.4" it worked for me

And dont put caret (^) infront of the version ("^2.0.4") like me :)

[wiwat-tharateeraparb]

Same here. With RN 0.57.7 and Socket.IO 2.2.0 (both server and client). Tried npm install --save [email protected] and it works without having to turn on Remote JS debugging.

[giantss]

"socket.io-client": "2.0.4" works fine on react-native 0.53.0, but "socket.io-client": "2.2.0" does not work.

[belal-mazlom]

Thanks @bgoyal2222 it's works with me also.
I am using react native "0.56.0"

It's really horrible spending two days trying to figure out why it's work with debug remote js and not work without it.

[prashant-gaurav]

react-native: 0.58.3
socket.io-client: 2.2.0
i am unable to connect.

[ithustle]

+1
react-native: 0.58.3
socket.io-client: 2.2.0
i am unable to connect working without debug remote

[bgoyal2222]

Hi follow this it will solve

https://github.com/facebook/react-native/issues/22043#issuecomment-448497783

[slavikdenis]

In react-native: 0.58.4, problem still remains (I'm using https://github.com/stomp-js/stompjs). The thing, that websocket working only when 'remote debug' is on, is driving me crazy :D Any workarounds for my case?

[richkeenan]

@slavikdenis I'm getting this too - did you end up finding a workaround?

[slavikdenis]

@richkeenan unfortunately no.. wel not on the react-native side. We are getting back to 'polling' technique :/

[csotiriou]

After my tests, I am more than certain that the real bug is inside the Metro Bundler, which is behaving incorrectly with something on the latest versions of socket.io.

I switched to Haul, which uses standard webpack to perform the JS transpilation, and Socket.io is working fine there. Maybe we should transfer this issue to the metro bundler https://github.com/facebook/metro/issues ?

[slavikdenis]

@csotiriou would you mind to create a new issue there (if there isn't a possibility to transfer this issue). Also, any downsides of using Haul? For some reason, I have never hear about it before so if websocket works on that, I will migrate I guess. Thanks

[csotiriou]

@slavikdenis there are some downsides to using Haul, yes. Haul uses webpack, and is it slower in compilation that Metro - but that is just about the only downside I have found.

However, there are upsides, too - the ability to support all of the Webpack ecosystem, and to debug the Javascript code natively on the running device without using Chrome (you need an iOS device / simulator and Safari for that - but it still is far better than the current debugging methodology RN offers by default).

I would still like to see Metro Bundler to be fixed, through, as it is more performant.

[slavikdenis]

@csotiriou sounds good enough for a temporary solution while metro bundler will fix this (if every :D ). Thanks so far

[GioLogist]

Tried both 2.0.4 and 2.2.0 on RN 0.57.8, no luck.

[hbouhadji]

@GioLogist Same for me

[csotiriou]

I have opened a bug report for the issue here https://github.com/facebook/metro/issues/365

[michalchudziak]

Hi, I'm closing it for now since it looks like it's metro issue. Please check comment above for the reference.

[slavikdenis]

@michalchudziak well, after some more investigation, it may be a react-native issue. Should open new issue probably... see https://github.com/stomp-js/stompjs/issues/89

[csotiriou]

@slavikdenis can you please elaborate why you think the mentioned issue disqualifies the metro bundler as the source of the issue?

[slavikdenis]

@csotiriou I'm sorry, you are right. There have been reports that in haul bundler this issue does not occur.

[peterchibunna]

I think this issue should be left open.

[basitsattar]

Any update?

[MoffKalast]

I'm not entirely sure if you guys are correct. I downgraded react down to 0.55 and later even 0.54 and socket.io-client to 2.0.4 and it's still giving me the exact same transport errors on native android while working perfectly in remote JS debug in Chrome.

Needless to say I cannot get this bloody thing to work in any way, shape or form. Haul doesn't even package it without crashing.

[basitsattar]

@MoffKalast let me know if you figure something out. I am also stuck :P

[MoffKalast]

@basitsattar at this point I've gone through dozens and dozens of socket.io/react tutorials, stackoverflow posts and github issues, tried all the random tips and tricks without any luck so I don't see what else is there to even try.

I guess I'll wait a few more days if anyone comes up with anything and then ditch react for something that actually works.

[LironEr]

Just tried with the latest haul bundler, and the issue exists