location the source of Invariant Violation: Objects are not valid as a React child (found: [object Promise])

Question

The stack trace is not pointing to the source of the problem:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in Route (at App.js:84)
    in Switch (at App.js:78)
...

.

that points to:

App.js:84

<Route path="/callback" render={props => this.onRouteToCallback(props)} />
//...
async onRouteToCallback ({ location }) {
  return <View><Text>test</Text></View> // added to debug

Below the stack trace is a snippet showing setState, so I added a console.log of that state to see if it is a promise:

_callee4$
src/App.js:122
  119 | 
  120 |   console.log('apolloClient', JSON.stringify(apolloClient))
  121 | 
> 122 |   this.setState({ apolloClient })
      | ^  123 | }
  124 | 
  125 | async relayAuthToGraphcool() {

But it is not a promise, just a plain js object.

How can I locate the source of the error?

Answer 1

this.onRouteToCallback is an async function - when you call an async function without await in front of it, the return value is a Promise (after all, async/await is just syntax sugar for Promises).

You can't return a Promise from a Route render prop - it has to return a component.