Flow: Flow considers React types to be any-typed values if they are imported in a flow-typed module

[debel27]

Flow version: 0.132.0 and above

Expected behavior

Now flow error

Actual behavior

Flow emits an error when I use a React type that has been imported in a flow-typed module.

Github repo: https://github.com/debel27/flow-issue_value-as-type

To reproduce : clone the project, run yarn, then run yarn run flow

The emitted error is the following

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/index.js:4:13

Cannot use Node as a type because it is an any-typed value. Type Node properly, so it is no longer any-typed, to use it
as an annotation. [value-as-type]

     1│ // @flow
     2│ import * as React from 'react';
     3│
     4│ const node: React.Node = <div>Hello world</div>;
     5│

[STRML]

One way to get around this - use the internal names. So rather than React.Element, use React$Element. A find/replace from React. to React$ in any libdef file should take care of it.

[pascalduez]

Something's really funky here, it's because of the flow-typed/types.js file you have with a import type { Node } from 'react'; inside.

1. That flow-typed folder is handled as a "normal" file since it's not in the [libs] section of the config.
2. import type { Node } from 'react'; should be fine, either in a lib or "normal" file.
3. It shouldn't affect other imports...
4. :woman_shrugging:

Note: react types are still part of Flow core, it's only react-dom that got moved to flow-typed for now.

[pascalduez]

In library definitions, the imports must be inside a declaration block.

declare module 'something' {
  import type { Node } from 'react'
}

[debel27]

Regarding 1., I'm expecting flow-typed to be considered as a lib folder by default (as stated in the docs).

I was unaware there were plans of moving out React types from Flow core. Thanks for the info.

[pascalduez]

TIL: "By default, the flow-typed folder in your project root directory is included as a library directory. "

[pascalduez]

Import statements are no longer allowed at the toplevel of library files. To use import statements in library files they must appear within a "declare module".

https://github.com/facebook/flow/blob/master/Changelog.md#01430