[redux-devtools-plugin] Not listing physical device vs emulator + Hermes asyncIterator problems

[dprevost-LMI]

Describe the bug

We integrated Rozenite into our application, and it generally works well beside the Redux plugin, which shows nothing.
We usually run on physical devices, and after generating an RN 82 test project and comparing the emulator vs. physical devices, we found that the redux plugin works well on the emulator but not on the physical device (At least for Android; iOS has not been tested yet)

Working Redux rozenite plugin screenshot (Android emulator)

Non-working case on physical device (screenshot using Vysor)

Both are on the same project/code, which is a new RN 82 project generated by the react-native-community/cli with a basic integration of Roxzenite + redux/toolkit. See https://github.com/dprevost-LMI/rn82/tree/rozenite-and-redux.

System Info

info Fetching system and libraries information...
System:
  OS: macOS 15.6.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 96.61 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.4
    path: /Users/dprevost/.nvm/versions/node/v20.19.4/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/dprevost/.nvm/versions/node/v20.19.4/bin/yarn
  npm:
    version: 10.8.2
    path: /Users/dprevost/.nvm/versions/node/v20.19.4/bin/npm
  Watchman:
    version: 2025.08.18.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/dprevost/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 3.3.3
    path: /Users/dprevost/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.0
    wanted: 0.82.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Rozenite Version

v1.0.0-alpha.15

Reproduction

https://github.com/dprevost-LMI/rn82/tree/rozenite-and-redux

Steps to reproduce

STR

1. Generate a project with communic/cli and integrate rozenite + redux toolkit or use this project
2. Plug a physical Android phone (Samsung S20 FE Android 13 in the screenshot above) into your Mac OS
3. Start the project npm run android
4. It installs and runs the app on the physical phone
5. Open the debugging, and you see the Redux plugin tab
6. Interact with the phone to trigger the redux event; nothing is shown in the plugin, even if you select the "auto-instance" in the selector
7. Expected: We see the physical phone in the selector, we see redux actions triggered, and the state is not undefined
8. Repeated with an Android emulator, and everything works fine.

Note: I will troubleshoot over the next two days to see if I can find more technical information on this!

[dprevost-LMI]

Running adb reverse tcp:8765 tcp:8765 before seems to solve the communication issue, and now I'm seeing data. I wonder if this could be automatic somehow, or be detected and request/console log to be run separately?

[dprevost-LMI]

😒 Even though what I found here is true, it seems that, for my main application, something else is still interfering with communication. I have a hard time finding where to debug this. If anyone has any hints for me, I'm all open. Thanks!

[V3RON]

Hi @dprevost-LMI 👋
You're right - you need to use adb reverse to create a tunnel and pass data through port 8765, which is used by Redux DevTools. As far as I know, there's no way to differentiate between a local emulator and a remote device tunneled via adb. What we can do is log a message informing the user that this might be the case if they’re running on a real device.

Regarding your application, can you tell if there’s any distinct difference between it and the reproduction you provided?

[dprevost-LMI]

Regarding your application, can you tell if there’s any distinct difference between it and the reproduction you provided?

There is a lot, unfortunately, since it is proprietary, I cannot share it directly. Some differences I notice:

1. I'm on RN 77 (I already have a simple RN 77 project similar to RN 82, and RN 77 does not seem to be the issue)
2. I have two stores since I use an extension for image sharing in my app, but I registered only on one and commented out the second one for now
3. I have two debug targets because of reanimanted and rn-screen, but the second one should not interfere. I find this post explaining it: Duplicated debug targets after upgrading to 76.x facebook/react-native#50696 (comment). I try to get rid of it, but no success.
4. I'm on an older version of reduxtoolkit (1.9.3) and react-redux (8.0.5), but in my RN 77 project, I downgraded, and it was still working fine, so it should not be that.
5. I just saw I'm also pulling "redux-devtools-extension": "2.13.9", not sure if this can be at fault.
6. I use Sentry, which is added to the metro.js
7. I'm also using Reactotron
8. I'm using redux-persist

Ususally, adding console logs and tweaking things is my way of finding the culprit, and after that, I try to replicate it in a plain RN project to share as an issue!

So if you have any pointers in the code for rozenite or redux where I could add a console log to see where "it fails," maybe I could find a lead!

Maybe I could share my Metro config or the Redux store config, but some parts would be incomplete!

Update: for my enterprise app, I do not reach this line in Redux Dev Tools; instead, it errors out with err connecting to remotedev-server TypeError: Object is not async iterable

[dprevost-LMI]

Adding the workaround below in index.js as mentioned here fixes the issue in my enterprise app.

Symbol.asyncIterator ??= Symbol.for("Symbol.asyncIterator");

So the above + adb reverse tcp:8765 tcp:8765 were required to run the redux plugin on a physical device under Hermes!

Update: I tried to reproduce in a plain RN77 project and was unable to, even if I turned off newArch, so something else is coming into play. Babel config should also be the same.

• See https://github.com/dprevost-LMI/Rn77App/tree/rozenite

[dprevost-LMI]

While waiting for a better automatic solution and bug fix in redux-devtools, here a documentation PR to help others: #127

[V3RON]

The workaround you mentioned is already implemented in the code. In fact, I just installed the Playground app on a Motorola G72, and after creating a tunnel with adb reverse, I successfully connected to the Redux store. No changes to the code were needed.

[V3RON]

Actually, could you modify the code of the Redux DevTools plugin locally and make sure the require for @redux-devtools/remote is inlined in the rozeniteDevToolsEnhancer? The problem you are experiencing may be caused by a sort of race condition.

The code should look like this:

const rozeniteDevToolsEnhancer = () => {
  const { devToolsEnhancer } = require("@redux-devtools/remote");
  return devToolsEnhancer({
    name: getDeviceId(),
    hostname: getHostname(),
    port: REDUX_DEVTOOLS_PORT,
    secure: false,
    realtime: true
  });
};

[V3RON]

One more thing: do you have inlineRequires enabled in the app experiencing the issue?

[dprevost-LMI]

Yes, it might be because of inline require(); we had refactored our app to minimize any boot dependency since we have a critical boot-time feature.
I'll take some time today to test that out and report it!

[dprevost-LMI]

I finally find a recipe that works by importing rozeinte into my index.js instead of explicitly requiring Symbol.asyncIterator ?? (Symbol.asyncIterator = Symbol.for("Symbol.asyncIterator"));

In short, the symbols need to be loaded earlier in Rozenite, as shown in the screenshot below, and I need to target the cjs file specifically; otherwise, it loads the js version one, sets it as global, and it doesn't seem to be the right way.

I don't understand all this, but multiple attempts end up with the screenshot below as a working case.

Note:

• I'm on RN 0.77.2
• My project is a CommonJS one from the package.json
• I'm also using webpack 5.94.0
• I do not follow the usual RN project folder structure. We have some custom way where we can build a native app alone and as a container, and spin that up and use it in the JS
• I'm on node 20.14.6
• Metro v0.81.4

Our app component init is delayed using requires for a on app boot critical feature not requiring the UI

Code snippet

AppRegistry.registerComponent('gotoconnect', () => initGoToApp());
const initGoToApp = () => {
  return require('./initApp').default;
};

After testing, the Symbol.asyncIterator init is required before importing @redux-devtools/remote
So this line needs to be before this one: