Flow is not catching type errors for an imported component

Question

I have a simple component ErrorBoundary that is used in another component. Both components are checked by flow (i.e. they have the /* @flow */ flag). But flow is not catching an error if I misuse ErrorBoundary by not providing the correct props. Here's ErrorBoundary:

/* @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;

And here it is being misused:

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

type Props = {};

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

Despite the fact that I've not provided the necessary component ErrorComponent to ErrorBoundary, when I run flow it reports "No Errors!". If, however, I were to import a typed function from the same file, it works. Or if I were to try to use ErrorBoundary incorrectly inside its own module file, flow also catches the error.

The problem seems to have something to do with importing React components that have been typed using flow specifically. Does anyone know what I might be doing wrong?

Answer 1

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.