[Android] Device plugin 'Hermes Debugger (RN)' is not supported by the selected device

[gentlee]

🐛 Bug Report

I can't get Hermes debugger working - it is unavailable. Got "Device plugin 'Hermes Debugger (RN)' is not supported by the selected device". Created multiple emulators - nothing.

Other plugins like Databases and Layout work.

How can device not support the plugin?

To Reproduce

custom metro port: 8082
enableHermes: true
FLIPPER_VERSION=0.156.0

Initialization:

public class ReactNativeFlipper {
    public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
        if (!FlipperUtils.shouldEnableFlipper(context)) return;

        final FlipperClient client = AndroidFlipperClient.getInstance(context);

        client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
        client.addPlugin(new ReactFlipperPlugin());
        client.addPlugin(new DatabasesFlipperPlugin(context));
        client.addPlugin(new SharedPreferencesFlipperPlugin(context));
        client.addPlugin(CrashReporterPlugin.getInstance());

        NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
        NetworkingModule.setCustomClientBuilder(
                new NetworkingModule.CustomClientBuilder() {
                    @Override
                    public void apply(OkHttpClient.Builder builder) {
                        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
                    }
                });
        client.addPlugin(networkFlipperPlugin);

        client.start();
    }
}

app/build.gradle

    // INIT https://github.com/react-native-community/react-native-template-typescript/blob/main/template/android/app/build.gradle
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

Environment

1. Emulators with api 31 and 33, arm64-v8a
2. Flipper 0.157.0
3. deps:

"react-native": "0.67.2",

devDeps:

"react-native-flipper": "0.157.0",
"react-native-performance": "3.1.1",
"react-native-performance-flipper-reporter": "3.0.0",

Using custom port for metro 8082.

[Nantris]

Been seeing this for weeks. Not sure if it's related to the Flipper version or what. I've tried upgrading/downgrading seemingly everything without resolution on a previously working project using API 32 and React Native 0.68.

[Nantris]

Tried API 31 and 33 now also, in new emulator devices. I've tried all the steps on the Flipper troubleshooting page, I've tried rebooting the machine, upgrading Android Studio, upgrading react-native-flipper - downgrading all the same things, bisecting our code.

Always always this problem I never had before a few weeks ago:

Device plugin 'CPU' is not supported by the selected device 'Pixel_4_API_31' (Android).

@mweststrate @passy I'm really sorry to ping you, but do you have any ideas? I'm out of theories to even try and we're dead in the water without the ability to debug. Is there anything we should look for in our Device Logs to indicate what the issue may be?

Regarding the troubleshooting step: "Make sure the mobile SDK you are using is relatively recent (<1 month old)." -- this refers to the package version for react-native-flipper, right?

Edit: Spent at least another two hours onthis, but no progress at all :(

[Nantris]

I really hate to bump an issue so early after my first comment, but I've spent more than an entire day on this and made no progress. There does not appear to be anything actionable from my end to make this work, nor any clues for how we could - but we desperately need it to work.

[gentlee]

The issue for me was custom port, and special env parameter for custom port didn't work. There definitely should be port number somewhere in settings and it should work.

[gentlee]

And also there should be a proper message why plugin is not available, but not device not supported !!!!

Flipper is a pure pain 💩

[Nantris]

@gentlee thanks for your reply! Can you share what custom port you were using? We're not using any custom port to my knowledge, unless plugins can change the port.

And also there should be a proper message why plugin is not available, but not device not supported !!!!

I couldn't agree more. It led me on a wild goose chase to figure out what was wrong with my emulator, but apparently nothing is wrong there. Sadly, I have no idea where something might be wrong.

[Nantris]

Every time a new update comes out I hope and pray that it will fix Flipper, upgrade the app and the react-native-flipper dependency, but always "Device plugin 'Hermes Debugger (RN)' is not supported by the selected device" The issue affects us regardless of Android API level or React Native version, or even Flipper version I guess.

This same device used to work, and now no device works. Are there some debug logs or something else I can do to try to figure out why I'm seeing this message? I've already enabled the maximum level of debugging in Flipper and see no obvious issues.

All of my ports seem to be doing what I'd expect too, though I'm not 100% sure it's all correct - but nothing else is using any of the ports.

[Nantris]

No firewall enabled and !!global.HermesInternal resolves to true. I'll keep updating as I keep ruling things out, but I don't know that there's anything else for us to try.

Really tough to do anything with React Native when you can't debug it and you spend twice as long trying to fix debugging issues as you do coding...

[Nantris]

Same issue on physical devices. Affects iOS app also, which previously connected but now won't; same version of app that worked before, old version of Flipper, new version of Flipper, doesn't matter. I tried deleting .flipper again in desperation, but the error seems permanent once it occurs.

No VPN enabled, truly nothing I can think to try.

Note: I made sure to not run the emulator while trying to connect the physical device

[Nantris]

Also affects other projects we have, which also used to work - again, across machines...

[Nantris]

It stopped working for us unless specifying METRO_SERVER_PORT=19000 - but we never used to set this and it used to work. I don't know if Flipper has some remote component similar to Chrome's devtools, but that's the only way that I could explain it simultaneously breaking on multiple machines.

[vietmobilefolk]

It works for me until today, and it turns into no support. I found there is a new version of Flipper, try to install the new version but the same problem still happens. 15 minutes ago it worked :(

[Nantris]

@Vietvantue if you're using Expo see: jakobo/expo-community-flipper#19 (comment)

Even if you're not, maybe it will lead you to the right solution. Randomly we started to need to set the METRO_SERVER_PORT - I mean absolutely out of the blue.

But if it worked 15 minutes ago, I assume you're already sure it's not some change in your code that caused it? Did you try rebooting the machine?

[pdavid0]

Exact same issue on my end, everything is on latest version

Expo Ejected

"react-native": "^0.69.6",
"expo": "^46.0.16",
"react-native-flipper": "^0.172.0",
"redux-flipper": "^2.0.2",

Android

FLIPPER_VERSION=0.172.0
newArchEnabled=false
enableHermes=true

Opening the debugger menu open Chrome Dev Tool, then crashes with OOM.

I tried:

METRO_SERVER_PORT=19000 open -a Flipper

#!/bin/sh

adb reverse tcp:8081 tcp:8081

# flipper
adb reverse tcp:5037 tcp:5037
adb reverse tcp:8088 tcp:8088
adb reverse tcp:8089 tcp:8089
adb reverse tcp:9088 tcp:9088
adb reverse tcp:9089 tcp:9089

adb reverse --list

console.log(!!global.HermesInternal);
// true

With little luck

[zhangstar666]

Same here.
I just want to start the sample project of Reanimted and debug it.
But Flipper tell me:
"Device plugin 'Hermes Debugger (RN)' is not supported by the selected device 'sdk_gphone_x86_64_arm64' (Android)."

The strange thing is that Flipper's log outputs.
4 plugin(s) were loaded in legacy mode.
Hermes Debugger (RN) (id: Hermesdebuggerrn)

It looks like Flipper has loaded Hermes Debugger plugin correctly.

[gentlee]

The issue for me was custom port, and special env parameter for custom port didn't work. There definitely should be port number somewhere in settings and it should work.

I got this issue on my second project and the solution was similar to my previous one:

1. Add class ReactNativeFlipper to android/app/src/debug/java/com/your-package-name/ReactNativeFlipper.java
   It somehow was missing on that project, probably after ejecting expo.
2. Replace script "start": "expo start --dev-client" with common "start": "react-native start --reset-cache".
   Expo probably also uses custom port for the bundler so hermes debugger didn't work.

[ashuvssut]

@zhangstar666 did you find any solution? I have the exact same scenario here.

[ivanvpan]

This blog post is a godsend and fixed the problem for me: https://hsiang.dev/debugging-flipper-desktop-app-clfkttntg000609kyd3kd1mz4

Long story short Flipper reaches to the Metro URL and then checks that the document returned contains one of the two strings:

• 'React Native packager is running'
• 'Metro is running'

And then the solution is to find your index.html file and just add one of those as a comment. For example:

  <!-- React Native packager is running. -->

PS: This is an awful way to check whether Metro is running. index.html is modifiable, obviously.

[EduFrazao]

Hi folks. Any updates about that? I Have the same problem here, and tried the workarounds listed here. Nothing works. Same problems on emulators or real devices.
I've tried with Flipper 0.182.0 and 0.238.0

[gentlee]

Faced that issue on my 3rd project.

The fix was to use 0.235.0 version (for 0.239.0 it doesn't work).

[EduFrazao]

Faced that issue on my 3rd project.

The fix was to use 0.235.0 version (for 0.239.0 it doesn't work).

Here any version <= 0.237.0 works.

[badalsaibo]

Flipper 0.235 works fine for me. Here's all old releases https://github.com/facebook/flipper/releases

[dattran1232003]

Hermes Debugger Plugin is only available when I select a device called "React Native"

[bndissanayaka]

This plugin is not compatible with the in-browser Flipper distribution.

Please, install our last Electron release v0.239.0 to use this plugin.

I tried what the above answer has stated, enabling react native device and seems like hermes no loger is available for in-browser distribution 👎