Flow: Property `Component` not found in module `react`

[alexeyraspopov]

.flowconfig:

[ignore]
.*/node_modules/.*
static/.*

[libs]
interfaces/

[include]
node_modules/flux/flow/include

[options]
module.system=haste
module.name_mapper='^[./A-z0-9$_-]+\.css$' -> 'CSSModule'
module.name_mapper='^core/\(.*\)' -> '<PROJECT_ROOT>/core/\1'

AppLayout.react.js;

/* @flow */
import React from 'react';
import Styles from 'core/AppLayout.css';

// React Hot Loader requires root components to be classes.
/* eslint react/prefer-stateless-function: 0 */
export default class AppLayout extends React.Component {
  render() {
    return (
      <div className={Styles.appLayout}>
        <h1>hello</h1>
      </div>
    );
  }
}

Result:

λ make test
exec flow check
core/AppLayout.react.js:7
  7: export default class AppLayout extends React.Component {
                                                  ^^^^^^^^^ property `Component`. Property not found in
  7: export default class AppLayout extends React.Component {
                                            ^^^^^ module `react`

[nmn]

There's long been some problems with the React module definitions in Flow.
My best guess is that this is because it tries to support both commonJS and ES6 imports correctly.

In my case, my problem was only that Flow had no type information about React. But this was pre-0.28

I have these types declared locally which fixes the problem:

declare module 'react' {
  declare var Component: typeof React$Component;
  declare var PropTypes: ReactPropTypes;
  declare var Children: any;
  declare function cloneElement<Config> (
    element: React$Element<Config>,
    attributes: $Shape<Config>,
    children?: any
  ): React$Element<Config>;
  declare function createElement<Config>(
    name: ReactClass<Config> | $Keys<$JSXIntrinsics>,
    config: Config,
    children?: any
  ): React$Element<Config>;
  declare function findDOMNode(
    object: React$Component<any, any, any> | HTMLElement
  ): any;
  declare var version: string;
}

declare module 'react-dom' {
  declare function findDOMNode(
    object: React$Component<any, any, any> | HTMLElement
  ): any;

  declare function render<Config>(
    element: React$Element<Config>,
    container: any
  ): React$Component<$DefaultPropsOf<Config>, $PropsOf<Config>, any>;

  declare function unmountComponentAtNode(container: any): boolean;
  declare var version: string;
}

I'll try to see if I can reproduce your problem and see if I can make some tweaks to the flow lib to fix the problem. If so I'll make a PR. In the mean time, feel free to steal my type defs.

[nmn]

Update: I still can't reproduce your problem locally.

Instead, flow still thinks the type of React is any

I tried, changing the flow lib to be

declare module 'react' {...}

instead of

declare module react {...}

but that didn't help.

The react-dom package works perfectly however.

[alexeyraspopov]

Weird, I ended up with copying flow/lib/react.js to my project.

[iamchenxin]

@nmn Did you use nuclide? if so ,it is not something wrong with Flow,but the nuclide. Nuclide will mark something can be resolved later as any Type.Like: #2024 nuclide/issue #417 & #1552 .
Hope Nuclide will fix this. But Nuclide hope Flow group fix them. so seems those bugs will exist a long time.

[nmn]

@iamchenxin no I wasn't using Nuclide, but linter-flow and autocomplete-flow

[alexeyraspopov]

@iamchenxin, @nmn, I'm not using Nuclide and still have this issue.

[nmn]

It's not a nuclide issue. It's a flow issue.

[bgeihsgt]

I'm consistently hitting this issue for all of our components in our react-native app -- any tips/ideas?

Running 0.31.1

[neurosnap]

I'm having this issue as well running 0.31.1 ...

[thirafidide]

i'm hitting this issue after upgrading my flow-lib from 0.24 to 0.44

[neurosnap]

https://github.com/facebook/flow/issues/3685#issuecomment-293722391

[fga13]

I reproduce the same issue with a flow-typed custom type, where I tried to import {Component} from 'react'.
Then, in my React components, I have the error. I need sometimes to "killall" flow...
If I import React only, and use React.Component in my type definition, everything becomes ok...
Hope this helps...
Flow-bin version 0.45.0, flow-typed version 2.1.2, react version 15.5.4

[TrySound]

I think we can close this issue. If there still will be a problem we can track it in new issue.

/cc @vkurchatkin