React Flow Type Error

Question

Good evening everyone,

I am fairly new to Flow and am writing a program utilizing React 16 + MobX. I haven't had too many issues thus far, however am still in the early stages of the project.

Being new to Flow has caused a couple of issues. In this case I cannot figure out how to solve the incompatibility error I am receiving for a child component.

I have included the 'flow status' output below in hopes that someone can assist me or point me in the right direction to get the resolved.

I hope you have a wonderful night!

Ryan P.

    yarn run v1.7.0
    $ /Users/ryan/Projects/React/ao-boilerplate/node_modules/.bin/flow status
    Error ------------------------------------------------------------------- src/core/components/ThemeManager/index.jsx:8:3

    Cannot return `<Fragment />` because `React.Element` [1] is incompatible with `Node` [2].

      src/core/components/ThemeManager/index.jsx:8:3
      8|   <Fragment>{children}</Fragment>
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]

    References:
      src/core/components/ThemeManager/index.jsx:7:58
      7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                                  ^^^^ [2]


    Error --------------------------------------------------------------------------- src/modules/App/views/AppRoot.jsx:16:3

    Cannot create `ThemeManager` element because `React.Element` [1] is incompatible with `Node` [2] in property `children`.

      src/modules/App/views/AppRoot.jsx:16:3
            v-------------
      16|   <ThemeManager>
      17|     <Page>
      18|       <Route path="/" exact component={Login} />
      19|       <Route path="/signup" component={Signup} />
      20|       <Route path="/password-help" component={PasswordHelp} />
      21|     </Page>
      22|   </ThemeManager>
            --------------^

    References:
      src/modules/App/views/AppRoot.jsx:17:5
              v-----
      17|     <Page>
      18|       <Route path="/" exact component={Login} />
      19|       <Route path="/signup" component={Signup} />
      20|       <Route path="/password-help" component={PasswordHelp} />
      21|     </Page>
              ------^ [1]
      src/core/components/ThemeManager/index.jsx:7:49
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                          ^^^^ [2]


    Error --------------------------------------------------------------------------- src/modules/App/views/AppRoot.jsx:16:3

    Cannot instantiate `React.Element` because in type argument `ElementType`:
    - Either inexact `Node` [1] is incompatible with exact `React.Element` [2] in the return value.
    - Or `Node` [1] is incompatible with `React.Portal` [3] in the return value.
    - Or property `@@iterator` is missing in `Node` [1] but exists in `$Iterable` [4] in the return value.
    - Or function [5] is incompatible with statics of `React.Component` [6].

      src/modules/App/views/AppRoot.jsx:16:3
              v-------------
        16|   <ThemeManager>
        17|     <Page>
        18|       <Route path="/" exact component={Login} />
        19|       <Route path="/signup" component={Signup} />
        20|       <Route path="/password-help" component={PasswordHelp} />
        21|     </Page>
        22|   </ThemeManager>
              --------------^

    References:
      src/core/components/ThemeManager/index.jsx:7:58
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                                    ^^^^ [1]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:18:5
        18|   | React$Element<any>
                ^^^^^^^^^^^^^^^^^^ [2]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:19:5
        19|   | React$Portal
                ^^^^^^^^^^^^ [3]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:20:5
        20|   | Iterable<React$Node>;
                ^^^^^^^^^^^^^^^^^^^^ [4]
      src/core/components/ThemeManager/index.jsx:7:22
                                v--------------------------------------------
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
        8|   <Fragment>{children}</Fragment>
        9| );
            ^ [5]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:161:5
      161|   | Class<React$Component<any, any>>;
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [6]


    Error --------------------------------------------------------------------------- src/modules/App/views/AppRoot.jsx:16:4

    All branches are incompatible:
    - Either inexact `Node` [1] is incompatible with exact `React.Element` [2].
    - Or `Node` [1] is incompatible with `React.Portal` [3].
    - Or property `@@iterator` is missing in `Node` [1] but exists in `$Iterable` [4].

      src/modules/App/views/AppRoot.jsx:16:4
      16|   <ThemeManager>
              ^^^^^^^^^^^^

    References:
      src/core/components/ThemeManager/index.jsx:7:58
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                                    ^^^^ [1]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:18:5
      18|   | React$Element<any>
              ^^^^^^^^^^^^^^^^^^ [2]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:19:5
      19|   | React$Portal
              ^^^^^^^^^^^^ [3]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:20:5
      20|   | Iterable<React$Node>;
              ^^^^^^^^^^^^^^^^^^^^ [4]



    Found 4 errors

    Only showing the most relevant union/intersection branches.
    To see all branches, re-run Flow with --show-all-branches
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

Have you imported { Node } from "react"? If you haven't, Node refers to a DOM Node, not the React Node type.

Answer 2

Firstly, flowify the component we just wrote:

import * as React from 'react'

If you need a return type for your component render() methods then you should use React.Node And the type inside the render block should be React.Compenent or React.Element.

From Flow Document: The definition of React.Node can be roughly approximated with a React.ChildrenArray

type Node = React.ChildrenArray<void | null | boolean | string | number | React.Element<any>>

I could comment better if I could see the whole code, but as far as I can see, the type of class ThemeManager should be React.Component.

const ThemeManager = ({ children }: { children: ?React.Node }): React.Component<Props> => ...