Flow: React.Element type is incompatible with object type
When I try to use jsx in render function and include two or more React elements in one <div>, flow complained [flow] React element 'div' (This type is incompatible with object type See also: React element 'div' Property 'children' is incompatible:).
Here is the shortcut:
The weired thing is, when I try on flow.org/try.
It shows No Errors.
So what is the problem with this error?
Environment:
"react": "^16.0.0",
"flow-bin": "^0.62.0",
"mobx-react": "^4.3.4"
Tried using older edition or upgrade vscode extension but not work.
LeoEatle
All 8 comments
Unfortunately, there is not enough information here to debug your issue. Please run flow check from the command line and share the full error here.
samwgoldman
on 22 Dec 2017
Appreciate for your reply. Here is one of the error stack:
Error: src/component/list-table/index.js:51
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `div`
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `div`. This type is incompatible with
203: div: {instance: HTMLDivElement, props: {children?: React$Node, [key: string]: any}},
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react-dom.js:203
Property `children` is incompatible:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
203: div: {instance: HTMLDivElement, props: {children?: React$Node, [key: string]: any}},
^^^^^^^^^^ union: undefined | null | boolean | number |
string | `React.Element` | `React.Portal` | `Iterable`. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react-dom.js:203
Member 1:
13: | void
^^^^ undefined. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:13
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
13: | void
^^^^ undefined. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:13
Member 2:
14: | null
^^^^ null. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:14
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
14: | null
^^^^ null. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:14
Member 3:
15: | boolean
^^^^^^^ boolean. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:15
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
15: | boolean
^^^^^^^ boolean. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:15
Member 4:
16: | number
^^^^^^ number. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:16
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
16: | number
^^^^^^ number. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:16
Member 5:
17: | string
^^^^^^ string. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:17
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
17: | string
^^^^^^ string. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:17
Member 6:
18: | React$Element<any>
^^^^^^^^^^^^^^^^^^ React.Element. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:18
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. Inexact type is incompatible with exact type
18: | React$Element<any>
^^^^^^^^^^^^^^^^^^ object type. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:18
Member 7:
19: | React$Portal
^^^^^^^^^^^^ React.Portal. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:19
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
19: | React$Portal
^^^^^^^^^^^^ React.Portal. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:19
Member 8:
20: | Iterable<React$Node>;
^^^^^^^^^^^^^^^^^^^^ Iterable. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:20
Error:
51: <div className='listTable-body'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React children array. This type is incompatible with
20: | Iterable<React$Node>;
^^^^^^^^^^^^^^^^^^^^ $Iterable. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\react.js:20
Property `@@iterator` is incompatible:
197: @@iterator(): Iterator<T>;
^^^^^^^^^^^^^^^^^^^^^^^^^ function type. This type is incompatible with. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\core.js:197
503: @@iterator(): $Iterator<Yield,Return,Next>;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\core.js:503
This parameter is incompatible:
197: @@iterator(): Iterator<T>;
^^^^^^^^^^^ Iterator. This type is incompatible with. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\core.js:197
503: @@iterator(): $Iterator<Yield,Return,Next>;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ $Iterator. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\core.js:503
Property `@@iterator` is incompatible:
503: @@iterator(): $Iterator<Yield,Return,Next>;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `@@iterator` of `$Iterator`. Property not found in. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\core.js:503
197: @@iterator(): Iterator<T>;
^^^^^^^^^^^ Iterator. See lib: C:\Users\ADMINI~1\AppData\Local\Temp\flow\flowlib_2870f279\core.js:197
I am getting almost the same exact errors:
"flow-bin": "^0.60.1",
"react": "15.6.2",
"react-dom": "15.6.2",
Running flow check results in Found 0 errors.
geoffmiller
on 28 Dec 2017
@LeoEatle:
I've seen this error as well. The error happens when a div's children have more than one node.
// No error
<div>
<span>1</span>
</div>
// Has error
<div>
<span>1</span>
<span>2</span>
</div>
It looks like you Iterator type is not correct, most likely it is overwritten by another 3rd-party library. In my case I am using mobx, which has its own Iterator type:
https://github.com/mobxjs/mobx/blob/master/flow-typed/mobx.js#L296
I had to remove mobx type definition to resolve this error.
youngzhao-xyz
on 29 Dec 2017
@youngzhaosignifyd
Thank you for your explanation and solution. After removing mobx type definition, my error is resolved.
LeoEatle
on 30 Dec 2017
@LeoEatle Ha great! Actually you can still use mobx type definition. I created an instruction here:
https://medium.com/@xiaoyangzhao/mobx-and-flow-typed-1d411a7b47fb
youngzhao-xyz
on 30 Dec 2017
Hi I am seeing this error, probably because I am using Flow, React and MobX. @youngzhaosignifyd I don't really understand your answer, what do you have to do, always use import type? Thanks!
jcham
on 13 Mar 2018
@jcham Please check the mobx README: https://github.com/mobxjs/mobx#flow-support
Just make sure you don't do the 3 bullet points in the readme:
- In .flowconfig, you cannot ignore
node_modules. - In .flowconfig, you cannot import it explicitly in the
[libs]section. - You do not need to install library definition using
flow-typed.
youngzhao-xyz
on 13 Mar 2018
Related issues
bennoleslie
路
3Comments
ctrlplusb
路
3Comments
jamiebuilds
路
3Comments
damncabbage
路
3Comments
marcelbeumer
路
3Comments
Most helpful comment
@LeoEatle:
I've seen this error as well. The error happens when a div's children have more than one node.
It looks like you
Iteratortype is not correct, most likely it is overwritten by another 3rd-party library. In my case I am using mobx, which has its ownIteratortype:https://github.com/mobxjs/mobx/blob/master/flow-typed/mobx.js#L296
I had to remove mobx type definition to resolve this error.