flipper-plugin-relay-devtools

flipper-plugin-relay-devtools copied to clipboard

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!

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?

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 [email protected] 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?

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();
}

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

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

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

@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.

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

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.

I have a same issue. 😢

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

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
});