Persistent React-Native error that goes away with Remote Debugging enabled

1
votes

I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead. throwOnInvalidObjectType D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6

Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.

If I build the project and install the app on a real device, the errors come back.

But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.

Is there anyway to get around this?

Thanks!

2
react-nativereact-native-android
Since you did not provide a minimal reproducible example it is hard to know what's wrong but here is something to start from. When remote debugging enabled, some renders might slow down. If you are doing a conditional rendering in some point of your app, in slow speed you can end up with the right condition and render fine but with minified code and faster rendering speed you might end up eith wrong condition. It might also because of a wrong usage of setState since it is async. - bennygenel
having the same issue, and I started removing imports and one of them is causing that. still debugging - Yernar Amergaliyev

2 Answers

1
votes

The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do: Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.

0
votes

TL;DR: Stopped using firebase and used react-native-firebase instead

The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.

Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.