React-native-debugger: Inspector get stuck at "Connecting to React…"

[someone235]

I did adb reverse tcp:8097 tcp:8097 but it doesn't help.

[jhen0409]

Are you using Android emulator? Maybe it's same with https://github.com/facebook/react-devtools/issues/476#issuecomment-279153990, try the following code on debug mode:

requestIdleCallback(() => alert('works!'), { timeout: 1 })

If it doesn't called alert, try to reset the date.

$ adb shell "date `date +%m%d%H%M%Y.%S`"

or reset the Android emulator.

[someone235]

I'm using a real device

[jhen0409]

@someone235 same, but you may not have permission to use adb for set time, open the network and sync time in the setting instead.

It's limitation in debug mode for RN, you need to keep the same device and computer time. (It only warn in more than 60 seconds.)

If it still not work and requestIdleCallback also, it may be another problem, could you provide more information? (RN version, Android version...)

[someone235]

requestIdleCallback callback is not called.
I have Android 6.0.1 and RN 0.39.2.
Do you know how can I do the time sync? I'm not familiar with the subject.

[jhen0409]

requestIdleCallback callback is not called.

Looks like it's same problem. :)

Do you know how can I do the time sync? I'm not familiar with the subject.

It's just date & time setting in Android (it should usually be automatic), if it's automatic, you can just make sure the device and computer on the same network.

If you still have this problem, there is a temporary solution here:

// Not recommended
if (__DEV__) {
  window.requestIdleCallback = null
  window.cancelIdleCallback = null
}
// Make sure it before call at `import { ... } from 'react-native'`

Or use external polyfill instead. (Like: react-devtools/agent/Bridge.js#L21-L22)

[someone235]

It did the trick, thank you

[gustavjf]

Android 6.0.1, RN 0.42.0, RN Debugger 0.6.2

I've tried:

1. Set automatic date + time on my physical device.
2. requestIdleCallback(() => alert('works!'), { timeout: 1 }) and requestIdleCallback(() => console.log('works!'), { timeout: 1 }), neither are called.
3. Your workaround above using window object.
4. Using the polyfill in an if (__DEV__) { ... } statement in my app's entry point.

I still cannot connect to the React dev tools using a physical device (Waiting for React to connect...). I added a console.log() inside if (__DEV__) { ... } just to make sure I am running in a dev environment and it prints correctly. I'm unsure what else to try at this point.

[jhen0409]

@gustavjf if you got Waiting for React to connect..., it mean you haven't connect to react inspector server, you can read this section to solve your problem first.

Also, I'm try to fix the problem of requestIdleCallback with https://github.com/facebook/react-native/pull/13116, if anyone still stuck Connecting to React…, just waiting for upstream or use the patch.

[gustavjf]

@jhen0409 Thank you, for some reason adb reverse tcp:8097 tcp:8097 works for me now.

[strayer]

I'm having this issue too with the Android emulator and simply can't resolve it… Time on the emulator and my Mac are equal, adb reverse doesn't change anything, window.requestIdleCallback(() => alert("works!"), { timeout: 1 }); apparently isn't called (can't see any alert) and putting the if (__DEV__) … stuff before import "react-native" also doesn't change anything. Same for a real device (although I need to do adb reverse then because the devtools won't even try to connect – but at least that means SOMETHING is working).

This is the right place, yes?

import React, {Component} from "react";
if (__DEV__) {
    window.requestIdleCallback = null;
    window.cancelIdleCallback = null;
}
import {AppRegistry, AsyncStorage} from "react-native";

Edit: Small update: It works fine with the iOS simulator, so this is really only happening on Android. Interesting!

[jhen0409]

@Strayer are you using RN ^0.43? Due to this change (It's no longer exported function), you need put the code before connectToDevTools, I'll update readme.
(node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js)

Also, https://github.com/facebook/react-native/pull/13116 looks ready but have some ship problem, if it goes well it should be at RN 0.45.

[irrigator]

@jhen0409 I'm using 0.43 and I added the code before connectToDevTools to enable the react dev tools. However, the connecting only works after I Stop Remote JS Debugging. That's weird.

[jhen0409]

My fault, it should be const {connectToDevTools} = require('react-devtools-core'); before:

if (__DEV__) {
  const AppState = require('AppState');
  const {PlatformConstants} = require('NativeModules');
  // Put the code here
  const {connectToDevTools} = require('react-devtools-core');
  ......
}

However, the connecting only works after I Stop Remote JS Debugging. That's weird.

The requestIdleCallback problem is only cause on Debug JS Remotelymode.

[jhen0409]

Fixed in https://github.com/facebook/react-devtools/pull/749, please waiting for the new version of the react-devtools-core package.

[jhen0409]

[email protected] should fixed the problem, please update the package in your react-native project. (Note that it's dependency of react-native)