Flow: Cross-file imports of flowtyped React components not working

[ezmiller]

I'm experiencing a frustrating issue where flow is not correctly checking usage of a flow-typed React component that I am importing into another file. The component in question looks something like this:

/* @flow */
import * as React from 'react';

type Props = {
  children: React.Node,
  ErrorComponent: React.ComponentType<any>,
};

type State = {
  hasError: boolean,
};

class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = { hasError: false };
  }

  componentDidCatch(error: Error, info: string) {
    console.log(error, info); // eslint-disable-line
    this.setState({ hasError: true });
  }

  render() {
    const { ErrorComponent } = this.props;

    if (this.state.hasError) {
      return <ErrorComponent />;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Then the incorrect usage looks something like this:

/* @flow */
import * as React from 'react';
import ErrorBoundary from '/path/to/ErrorBoundary';

class SomeComponent extends React.Component<Props> {
  render() {
    return (
      <ErrorBoundary>
        {..some markup}
      </ErrorBoundary>
    )
  }
}

The problem is that I have failed to provide the required ErrorComponent prop.

When I run flow, however, this error isn't caught. If I were to attempt to use the component in this way within the same file, it does cause an error though. So I think the problem has something to do with the import/export process, but I've not been able to pinpoint what I might be doing incorrectly.

Flow does work with the import/export of a straightforward function that is then used incorrectly... Any guidance would be great. I also have a stackexchange issue up and have asked around on the discord #flow channel to no avail.

[ezmiller]

The problem was that my import happens through a intermediary index.js file in the same directory as ErrorBoundary. That index.js file had not been marked with the // @flow tag. Once I added it, the type checking worked correctly.