Flow: Cannot instantiate React.Element errors in 0.89

[thebuilder]

After upgrading to 0.89 i'm seeing 7 new errors in my codebase, related to Cannot instantiate React.Element

Cannot instantiate React.Element because class Apollo [1] is incompatible with
string [2] in type argument ElementType.

     src/client.js
      55│       >
      56│         <ErrorBoundary module="App" debug={config.debug}>
      57│           <Router>
      58│             <Apollo
      59│               uri={endpoints.graphql}
      60│               debug={config.debug}
      61│               auth={config.auth}
      62│             >
      63│               <App
      64│                 initialModules={modules}
      65│                 initialMeta={meta}
      66│                 config={config}
      67│               />
      68│             </Apollo>
      69│           </Router>
      70│         </ErrorBoundary>
      71│       </I18nextProvider>

     /private/tmp/flow/flowlib_2a4d0d45/react.js
 [2] 170│   | string

     src/graphql/Apollo.js
 [1]  72│ class Apollo extends React.PureComponent<Props, State> {

I'm at a loss to what the issue is. I'm guessing the react.js flow lib doesn't accept the Component instance as an element? But why does it only happen to a select few instances? Some of them are React.PureComponent, but i'm also getting the error on a React.Component and a render function.

I wasn't able to replicate it in the sandbox.

[jbrown215]

Can you run with --show-all-branches ? I've seen this before when a prop in defaultProps doesn't match the type in Props

[thebuilder]

@jbrown215 Interesting, i gave it a try and it is indeed some defaultProps that match the model.
While this allows me to solve the issue, is it possible that the error can be improved? It's not obvious what the issue is. It should tell me that my defaultProps doesn't contain required value.

[jbrown215]

Oh yea, the errors around abstract component definitely need work and I am

actively working on that right now.

Sent from Gmail Mobile

[chrisvasz]

Same problem with the same solution in our codebase. A mismatch in defaultProps caused this error. Easy solution, and good to hear that work is being done on the error message!

[fibo]

I had the same issue Cannot instantiate React.Element on a component that looks ok. By now I just solved it downgrading to previous version v0.88.

[jbrown215]

@fibo: Can you show more information? The component, any HOCs it's wrapped in, and the full error message would be helpful.

[fibo]

Hi @jbrown215 I am working on a private repo where I found this issue but I created another repo that should make it easier to reproduce it: https://github.com/fibo/flow-issue-7277

[jbrown215]

@fibo: https://github.com/fibo/flow-issue-7277/blob/f43f5852e7fab5eefe0fbc8e16aad31ef8317412/Icon.js#L14 This line is the issue. Changing Function.prototype to () => { return } fixes the error. I'm not sure how Function.prototype is typed, since I think Function is now interpreted as any.

[fibo]

@jbrown215 thank you for find a solution, and in general to all people working on flow. I don't understand why it works in previous version and also

I think it is worth to note that Function.prototype is valid JavaScript and should be interpreted by flow as is, an empty function. Do you think it is possible to implement it in flow? There could be other developers using this syntax.