How to declare the module type of an react component for flowtype, without breaking the formatter?

Question

I defined a react component and use flow to check it:

/** @flow */
/** @jsx React.DOM */
var React = require('react');

var Hello = React.createClass({
    propTypes: {
        content: React.PropTypes.string.isRequired
    },
    render: function() {
        return (
            <section>hello</section>
        );
    }
});

module.exports = Hello;

But flow reports an error:

/Users/twer/workspace/yyy/a.js:16:16,20: ReactElement
Missing annotation

Because flow requires an module having type explicitly: http://flowtype.org/docs/type-annotations.html#module-boundaries

And for an react component, I need to declare the type on the render method, so I have to fix it like this:

render: function(): ?ReactElement {
    return (
        <section>hello</section>
    );
}

The problem is, it will break the formatter of my IDEA (because of the ? of ?ReactElement )

Is there any other place to put the ?ReactElement ?

Answer 1

I'm sure you figured something out by now, but note that the ? is optional.

render: function(): React.Element {
   // ...
}