Flow: Type checking props does not work on a lot of my components

[Alxandr]

I just noticed that flow is ignoring the props type on a lot of my components. Example:

import React, { Component } from 'react';

type Props = {
  +foo: string
};

class MyComp extends Component<Props, void> {
  render() {
    // no error here
    return <div>{this.props.bar.baz}</div>;
  }
}

// also no error here
const OtherComp = () => <MyComp baz="foo" />;

If I add props: Props to the MyComp class this solves one of the issues (this.props.bar fails), but the usage still does not show any errors.

This is happening for a lot of components (seemingly all that are not stateless functional components). The issue is that this is a huge project, and I've not been able to create a minimal case showing the same behavior. I don't know how to debug this. The thing I noticed though, is that flow is reporting that the component "extends" clause isn't covered:

The same goes for any usage of this.state or this.props inside the component. If anyone has any way to figure out why this is happening/how to fix it it would be really appreciated.

[taylor-cedar]

Do you have // @flow at the top of the files?

[TrySound]

@Alxandr Which version of flow do you use? Which is installed locally, which is globally?

[Alxandr]

@taylor-cedar Yes, this is the first thing I checked. Also, it's not happening just in one file, on general all the components written as class Foo extends Component<...> does not get typechecking on props and state. Functional Stateless Components works as expected though (and properly typecheck).

@TrySound Both are last version (0.63.1, as of yesterday at least)

I had the same problem with 0.61, it was just not noticed until yesterday (after I did the upgrade). However, I went back to our master branch and observed the same issue.

[TrySound]

Are you sure your IDE do not run some old version? Also did you tried to run npx flow checK or kill flow process?

[Alxandr]

@TrySound yep. I've tried all of the above with both versions of flow. Also I'm sure my editor is using the latest version, cause I had to update it because I updated the config to use new features.

[TrySound]

It's weird. Your example correctly fails in my env and in flow playground
https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDGMA0cDecDCE4EAdkifAL5wBmURcA5FKhowNwBQnMAnmEjgAFemADOcALy5OcOAGoaECAC44YmFGAkA5p0pdOaADYoxEgLK9C4OEgAeMcgBMJNyGQoAeERHHYANwhgZwA+GTkWEmckKAAKAEoIuTgAelS4Egg7KHooOAALWKRZFJYYAFcoEjgvZ2AA0JwYAuAxADowUQ6AIxQodr6AL0ovVPrGrjlKfW50uBRjMWysnLzC4qNSDTgAeRbY9yk4RKlwrysj4ckAIiUIG7TQ9iA

[Alxandr]

Yes. I already tested that. Taking my code (as is) and pasting it in the playground gives me the right errors. So as stated, I've been unable to figure out what's causing this, cause it's a huge app. And I don't even know when it started. I've been unable to create a minimal example that displays this bug as well. I don't know how to debug, or try to figure out what is causing this.

[Edit]
That being said, it's not just on my machine. My coworkers working on the same project is experiencing the same thing.

[cprodescu]

Can you share your .flowconfig as well?

[Alxandr]

Flow config:

# See the configuration guide here:
# https://flowtype.org/docs/advanced-configuration.html
[ignore]
# <PROJECT_ROOT> is treated as the absolute path to the project
<PROJECT_ROOT>/bin/.*
<PROJECT_ROOT>/build/.*
<PROJECT_ROOT>/doc/.*
<PROJECT_ROOT>/public/.*
# For the node_modules, we intentionally don't use <PROJECT_ROOT> because it generates errors like:
#src/screens/start/index.js:3
#  3: import { connect } from 'react-redux'
#                             ^^^^^^^^^^^^^ This modules resolves to
#                             "<<PROJECT_ROOT>>/../../node_modules/react-redux/package.json", which
#                             is outside both your root directory and all of the entries in the
#                             [include] section of your .flowconfig. You should either add this
#                             directory to the [include] section of your .flowconfig, move your
#                             .flowconfig file higher in the pro ject directory tree, or move this
#                             package under your Flow root directory.
#.*/node_modules/.*
.*/node_modules/yellowbox-react/*
.*/node_modules/redux-form/*
.*/node_modules/immutable/*
.*/node_modules/babel-*
.*/node_modules/@spt-tracking/*

[libs]
# If we don't include type definitions, we get this error:
# src/screens/start/index.js:4
#   4: import { connect } from 'react-redux'
#                              ^^^^^^^^^^^^^ react-redux. Required module not found
# These entries are the location of our type definition file
# See https://github.com/flowtype/flow-typed for more info on the flow-typed project
flow-typed

[options]
# For modules that don't have a definition file, stub them with an empty object
# A directory other than flow-typed is chosen to avoid the error:
# `Required module not found`
# This should usually not be needed. `flow-typed` will generate stubs for us.
module.name_mapper='^react-icons\/.*$' -> '<PROJECT_ROOT>/flow/icon-component.js'

module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/scss-object.js'

# This rewrites imports that use `$src` so flow finds the files.
module.name_mapper='^\$src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.name_mapper='^\$test\/\(.*\)$' -> '<PROJECT_ROOT>/jest/helpers/\1'
module.name_mapper='^\$env$' -> '<PROJECT_ROOT>/flow/env.js'
module.name_mapper='^\$sbutil$' -> '<PROJECT_ROOT>/.storybook/util.js'

# Ignore flow warnings about the usage of decorators
include_warnings=true
esproposal.decorators=ignore
esproposal.export_star_as=enable
esproposal.class_instance_fields=enable
esproposal.class_static_fields=enable
experimental.const_params=true
emoji=true
max_header_tokens=100
module.use_strict=true
munge_underscores=true
sharedmemory.dep_table_pow=20
sharedmemory.hash_table_pow=22

[lints]
all=warn
unclear-type=off
# TODO: Turn on untyped-import?
untyped-import=off
unsafe-getters-setters=off

[Poirette]

Exact same issue here with flow 0.59 or later. It happens with other dev too. If I switch a Component<> to a PureComponent<>, the type check is working well.

[ignore]
.*/build/.*
.*/node_modules/findup/.*
.*/node_modules/config-chain/.*

[include]
./src/**

[libs]
./flow-typed

[options]
module.name_mapper='^\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
suppress_comment= \\(.\\|\n\\)*\\@flow-ignore

[lints]

[athomann]

Are any of you using connect from react-redux ? I noticed flow is ignoring props on components that use the connect higher order component

[Alxandr]

@athomann Yes, but I have flow checking my connected props with no issue. Most of the connected components are stateless functional components, and all of those works just fine. The only thing that's not working is components defined as classes (whether they're using connect or not).

[benadamstyles]

I have just discovered this, and I can confirm that Flow is typing React.Component as any. Given that it types PureComponent correctly, and both these types appear to be declared in the same way, it's very difficult to work out why this is happening!

[sibelius]

Can u create a repo to reproduce this? Is it failing on 0.70?

[benadamstyles]

I've just created a new empty project and I can't reproduce the bug. I'm using the same .flowconfig as the project where flow is failing. I'll keep adding things until I reproduce, and I'll report back.

UPDATE: I've installed all the dependencies from my failing project, including all flow-typed libdefs, and still can't reproduce.

[benadamstyles]

Ok I've reproduced it, only to discover that this bug (at least in my case) has already been reported, with a reproduction: https://github.com/facebook/flow/issues/6014

Just for clarity, the cause of the bug is having the following in a libdef:

import {Component} from 'react'

If that file is listed in flow's [libs], then all imports of Component in the whole project will now be typed as any. The workaround is to remove the above line – obviously not a long-term solution!

[sibelius]

It should be import type instead and it should be inside module declaration

[benadamstyles]

Ok so my use case for the libdef was to "monkey-patch" the react-native types, adding a global AnimatedComponent type because react-native doesn't currently offer types for the Animated API. Given that you can't import outside the module declaration, is there any to achieve this now? My libdef was as follows:

// @flow

import {Component, type ElementProps, type ElementRef} from 'react'

declare class AnimatedComponent<Wrapped: Component<*>> extends Component<
  ElementProps<typeof Wrapped>
> {
  getNode(): ElementRef<typeof Wrapped>;
}

[Alxandr]

@sibelius how exactly is this supposed to work?

https://flow.org/try/#0PTAEAEDMBsHsHcBQiAmBTAxtAhgJzaALawoCu0BARJLLAEZ6WgDeiooAloQA6y4AuofgE9uBZqADCsHrAB2aOYIC+oSLhmgA5PmwZ+WgNxtQJ9FjwE0AD14DQFgM6PQAMVoAhPKBv9FKF2lZBSUAHmZlABpQADdYDhQAPhZlRGUgA

[sibelius]

you can also use React$Component private definitions on flow-typed

https://flow.org/try/#0PTAEAEDMBsHsHcBQiAmBTAxtAhgJzaALawoCu0BARJLLAEZ6WgDeooib6WeBaAHgAdYuAC6huAZwmgAYrQBCeUPxFoAdimkAlNNgwiAJAGFYhIWvUiAPMwC+AGlAA3WAEsUAPha3EtoA

[Alxandr]

So you're saying the only way to achieve this is by using backdoors that do not follow the module system?

[hellpirat]

I don't know why, but my code stops checking props in React.Components and I can not reproduce this example online

[slonoed]

@hellpirat I found similar issue when I forgot to add import * as React from 'react' in type file. Flow shows no errors besides making types any