import syntax throws when importing socket.io if debugger is not attached

[adamterlson]

I don't know how to even begin with this one, but I'm including Socket.IO into a project spawned from react-native init. The import of the SocketIO library bombs, but only when the debugger is not attached. I can use the require syntax instead and then that works no matter what.

Always works:
let io = require('socket.io-client/socket.io');

Fails with Chrome Debugging disabled but works otherwise:
import io from 'socket.io-client/socket.io';

Here's the error for whatever good it is: "undefined is not an object (evaluating navigator.userAgent.match)"

[facebook-github-bot]

Hey adamterlson, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[ide]

Socket.io likely needs to write a React Native version of their library. It looks like you're trying to run a browser version of their code.

[christopherdro]

@adamterlson I can confirm that i've used socket.io with react native and had no issues.

The only caveat that I ran into earlier was that userAgent was undefined.
I managed a temporary work around by adding window.navigator.userAgent = "react-native";

Here is an article by @browniefed that might help.
http://browniefed.com/blog/2015/05/16/react-native-and-socket-dot-io/

In the past i've worked with https://www.npmjs.com/package/react-native-swift-socketio and it worked fine as well.

Hope this helps!

[adamterlson]

@ChristopherDo Well Socket IO works fine, but that's not really the issue. The question is why there's inconsistent behavior from RN depending on import vs require usage and whether a debugger is attached. Does that not seem strange?

Thanks for the help!

[satya164]

@adamterlson As far as I understand, all imports are hoisted to the top, while requires are not. Hence, the reason it's not working with import syntax is, socket.io is being required and executed even before window.navigator.userAgent = "react-native" is called, and throws error.

I guess it only happens in debugger because there might be a delay somewhere while communicating via the bridge, and there is not enough delay when running on phone to cause this. I might be wrong though.

Feel free to close the issue if this answers your question.

[adamterlson]

@satya164 Good enough for me, thanks for the explanation!

[adamterlson]

@satya164 @christopherdro Have you also experienced an issue with Socket IO not working unless the chrome debugger is attached?

[satya164]

@adamterlson Nope. Working fine here. I needed to change 2 things, set the user agent, and disable jsonp.

[adamterlson]

What version of RN did you use? Do you have a project up somewhere I can clone perhaps?

[satya164]

@adamterlson I am actually using engine.io atm. But I had tested with socket.io previously. RN version shouldn't matter, because the WebSocket module hasn't changed since then.

Also it's weird that it would only work with Chrome debugger. In both cases it uses the Androide module.

BTW what's the error you're getting?

[adamterlson]

So I did a fresh init and plugged socket IO in and now I have two projects running. My first project is where SocketIO only works when the Chrome Debugger is attached, and now this new one, it doesn't seem to connect in general and if the chrome debugger is attached it throws the exception also referenced here:

http://browniefed.com/blog/2015/05/16/react-native-and-socket-dot-io/

I'm just all tangled up at this point. :)

You can see my socketio code here as well as the entire project:
https://github.com/adamterlson/react-native-messenger/blob/master/app/socket.js

Without the chrome debugger attached I don't actually see any errors, it just doesn't connect. Hard to tell more without a debugger. :)

[satya164]

@adamterlson It didn't work for me without disabling JSONP. Have you tried that?

io("...", { jsonp: false })

[satya164]

I'll have a proper look later tonight.

[adamterlson]

Yup, I have tried the jsonp thing. Sorry it's excluded from the pushed version. I've updated the repo.

[adamterlson]

@satya164 Any insights by chance?

[satya164]

Sorry, didn't get a chance to have a look. Will do ASAP.

[adamterlson]

@satya164 I'm still interested by the way, if you might find the time! :)

[chezhe]

@adamterlson I got the same error with socket.io.
It works fine while 'Debug in Chrome' running on a simulator is set .It fails while 'Disable Debug in Chrome' running on a simulator and running on a device.
I guess, that's because 'Debug in Chrome' mode,JS code runs inside Chrome and Chrome supports socket.io.
BTW, have you got a solution?

[adamterlson]

Seems like a good explanation.

No, no fix. It seems like an open issue to me. I'll reopen and hopefully someone has some guidance!

[browniefed]

This isn't really an issue with react native but more of an issue with socket.io
Go submit a PR to socket.io to handle no userAgent existing and this won't be an issue.

[adamterlson]

The issue is with the inconsistent behavior based on debugger attachment. Can you be more specific as to how the user agent is related?

[browniefed]

Has the error message changed from the one you originally reported complaining about navigator.userAgent.match being undefined?
Socket.io looks for the existence of window.navigator.userAgent. Both react-native and the chrome debugger which runs RN in a webworker do not have access to the such things.

[adamterlson]

@browniefed Thank you for the details. In some sense the actual issue is in fact not simply the error you've described and the screenshot I posted. It's more the inconsistency of behavior. As described in the thread and also experienced by @chezhe, if the debugger is attached things work fine.

Both react-native and the chrome debugger which runs RN in a webworker do not have access to the such things.

If this were the case, would it not be that socket io would not work at all, ever, rather than based on whether the debugger us attached or not?

I found a comment you made on this blog post a while back which states that socket io will not work with the debugger open. This thread/issue describes behavior where it only works with it open. Do you know what has changed?

[browniefed]

Lots of moving parts in RN, not sure exactly what is causing such things to happen.

What I can say, is if you are getting the userAgent error then that's a socket.io issue. Additionally babel hoisting imports vs requires can also surface as the userAgent issue.

I'm not saying RN is perfect with websockets and debugging but it seems to be external library issues failing and not necessarily react native.

Going forward, what errors are thrown when running on the device? I haven't seen those posted yet.
Edit: I realize it doesn't connect but I mean there isn't a lot to go off of, but it could be that a try/catch is causing issues? Maybe go down some debugging paths for more useful errors

[adamterlson]

I haven't done device testing on my end yet. @chezhe Can you post a screenshot? Though it was stated he got the "Same error" in both so I assume the whole user agent match thing.

@browniefed Thank you again. I appreciate the discussion!

[voppe]

Have you tried by adding ws:// in front of the url? I had the same problem: while debugging with Chrome it worked, when testing on the device it would just keep throwing reconnect_error with description "0". I changed the url from 127.0.0.1:8080 to ws://127.0.0.1:8080 and it was enough to fix it.
It's probably a bug with the reimplementation of WebSockets, I don't know why it should be explicit.

[chezhe]

@deyoppe now,yes.
I found this solution 2 days before, when I tried wss:// type.

[chezhe]

@deyoppe
I found it does not work again after upgrade RN 0.24.0 , same code. Have you met the same problem (I mean work on simulator fine, not for a device) after upgrade?
detail:
socket.io/client 1.4.5
it works V0.21.0

[Mokto]

Also does not work with 0.25.1.

[chezhe]

@Mokto Try this:

const io = socket(SOCKET_IP,{
  jsonp: false,
  transports: ['websocket']
})

[alexduckmanton]

That worked for me. Thanks a bunch, @chezhe!

[Mokto]

Thanks that works perfectly !

[kyaroru]

@chezhe thanks so much, it works like a charm ! I've been looking for solution and no hope until i saw this xD

[sibelius]

@satya164 I think u can close this issue

[browniefed]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @browniefed says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[EvHaus]

I am still having this issue. Using

"react-native": "0.35.0",
"socket.io-client": "1.5.0"

Using code:

import socket from 'socket.io-client/socket.io';

this._socket = new socket(BASE_URL, {
    jsonp: false,
    transports: ['websocket']
});

Using const io = require('socket.io-client/socket.io'); doesn't help either.

However, if I do NOT enable "Rebug JS Remotely" I get:

I have to enable remote debugging to get the error to go away. Furthermore, when building the production APK for the project, the app crashes immediately (due to the same error).

Am I missing something?

EDIT: I've used the technique here: http://browniefed.com/blog/react-native-and-socket-dot-io/ to fix the issue.

[tarkanlar]

@EvNaverniouk I am having the same issue RN 0.37.0 on ios only when debugger is on. could you find any work around?

EDIT: Fixed it by using socket.io-client version 1.2 instead of 1.7

[chezhe]

@tarkanlar

//you miss this part, define the environment socket.io works
//if not work, try put the following line into another file and import it
window.navigator.userAgent = "react-native";

const io = socket(SOCKET_IP,{
  jsonp: false,
  transports: ['websocket']
})

[luco]

@chezhe HUGE thanks! Been looking for this in the past hours.

[lucasmaciel]

I have this issue too. My code:

import React from 'react-native';
import './UserAgent'; // window.navigator.userAgent = "react-native";

//import io from 'socket.io-client/dist/socket.io'; (I tried this also)
const io = require('socket.io-client/dist/socket.io');

exports.createConnection = function(host, port, options) {
    console.log(window.navigator.userAgent);
    var stream = io(host+':3000', {
        jsonp: false,
        reconnection: true,
        reconnectionAttempts: 32,
        reconnectionDelay: 50,
        reconnectionDelayMax: 30000,
        timeout: 2000
    });
    return stream;
};

And only connects if I'm in debugging mode. The console log, when I'm in debugging mode, outputs Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 for window.navigator.userAgent, even rewriting it on UserAgent.js file. I don't know why. The modules version:
react-native: 0.32
socket.io-client: 1.7.3
socket.io: 1.7.3

PS: Someone knows if there is an alternative of socket.io for react native ?

[joa-queen]

Hey @lucasmaciel I'm experiencing the same problem.

Did you find any fix for this?

[lucasmaciel]

The code that works:

import React from 'react-native';
import './UserAgent';

import io from 'socket.io-client/socket.io';

exports.createConnection = function(host, port, options) {
    var stream = io('ws://'+host+':'+port, {
        jsonp: false,
        reconnection: true,
        reconnectionAttempts: 32,
        reconnectionDelay: 50,
        reconnectionDelayMax: 30000,
        timeout: 2000,
        transports: ['websocket']
    });
    return stream;
}

you have to write "ws://" instead of "http://". And add "transports: ['websocket']". It should works.

[joa-queen]

Still can't make it to work 😭

I'm using 1.7.3 too in socket.io both client and server.
React Native version 0.46.4.

[chezhe]

@joaqtor you can check my code
https://github.com/loafs/Agora/tree/master/store