Plugin appearing with empty dropdown, unable to load store

[CoreyLoose]

I'm really excited about getting this to work, and feel like I've gotten most of it set up, but I must be missing something.

1. I've got flipper + react native working together, and I can use the React DevTools plugin as expected

2. I've added your plugin to my project, and have the following code running

if (__DEV__) {
  import("react-native-flipper-relay-devtools").then((m) => m.addPlugin());
}

3. When I load up the Relay DevTools plugin in flipper I see the following

Any idea what's going on there? If you've got a hunch I'm happy to dig in and fix something if need-be.

Thanks!

[janicduplessis]

What version of relay are you using? I've seen this happen when the plugin can't connect to the relay store for some reason. Also is it on iOS or Android?

[levibuzolic]

Have the same issue too, the flipper logs report [Relay DevTools] Connected but the dropdown is empty.

Running Relay 12, Flipper 0.108.0 and react-native-flipper-relay-devtools@1.0.3 targeting an iOS Simulator. React Devtools and other plugins appear to be working correctly.

It appears to be connecting as expected, when starting the plugin I get The server is listening on port 8098. Waiting for connection and then end up with the same screen as @CoreyLoose (same version, empty dropdown, nothing in Network either).

I'm aso getting the same result debugging on a physical Android device.

Any tips for debugging the connection?

[levibuzolic]

Found a solution, strangely using a dynamic import doesn't work for the relay devtools in my app, even though the promise resolves and I can see there's an object exposed with an addPlugin() function, it doesn't seem to initialise properly.

Swapping the dynamic import out for a require works:

if (__DEV__) {
  require('react-native-flipper-relay-devtools').addPlugin();
}

[akinncar]

Same here:

"react-native": "0.64.2",
"react-relay": "^11.0.2",
"react-native-flipper": "^0.114.1",
"react-native-flipper-relay-devtools": "^1.0.3",

Swapping the dynamic import out for a require works:

if (__DEV__) {
  require('react-native-flipper-relay-devtools').addPlugin();
}

Doesn't work for me

[levibuzolic]

@akinncar are you getting The server is listening on port 8098. Waiting for connection in the flipper logs?

[janicduplessis]

Thanks for reporting the issue, I'll see if I can reproduce and find a fix in the next few days!

[akinncar]

@akinncar are you getting The server is listening on port 8098. Waiting for connection in the flipper logs?

not really

Thanks for reporting the issue, I'll see if I can reproduce and find a fix in the next few days!

Thanks, let me know if you want more information or if I can help with something more.

[waynezhang1995]

Hi experts, new to react-native world. I tried to follow the readme and have very thing setup. But when launching the app, getting this error message from the flipper debugger console: bundle.js:3843 Failed to start device plugin 'flipper-plugin-relay-devtools': TypeError: Cannot read property 'sendCommand' of undefined. Device is connected as I can use the React DevTools. Any hints? Thanks

[janicduplessis]

I had the same issues in my app. I published a new version of the plugin that fixes the TypeError: Cannot read property 'sendCommand' of undefined. I also needed to switch to require('react-native-flipper-relay-devtools').addPlugin(); so I updated the documentation. Maybe relay now requires the devtools to be initialized before the environment is created.

[yomybaby]

I have a same issue. 😢

On the flipper console, [Relay DevTools] Connected But still same empty one.

[yomybaby]

I found a solution.

Do not put this code in index.js. The best location might be before create Relay environment. new Enviroment ...

if (__DEV__) {
  require('react-native-flipper-relay-devtools').addPlugin();
}

export default new Environment({
  network: Network.create(fetchRelay),
  store: new Store(new RecordSource()),
  // handlerProvider: null
});