Babel 6 and Flow Annotations

13 March 2016

In Flow, a class may be defined using ES6 syntax extended with field declarations.

— http://flowtype.org/docs/classes.html

In Babel 5, this worked with the default configuration:

/* @flow */
class C {
  s : string;
  constructor(s) {
    this.s = s;
  }

  split() {
    return this.s.split('');
  }
}

The s : string; line is required by Flow; without it Flow will complain:

src/flow-test.js:5
  5:     this.s = s;
         ^^^^^^ assignment of property `s`
  5:     this.s = s;
              ^ property `s`. Property not found in
  2: class C {
           ^ C

In Babel 6, most Flow annotations continue to work as expected, but this class annotation now causes an error:

SyntaxError: src/flow-test.js: Missing class properties transform.
  1 | class C {
> 2 |   s : string;
    |   ^

The class properties transform the error is referring to is transform-class-properties, for “Class Property Declarations”, currently a stage 1 proposal.

Flow doesn’t depend on future ECMA262 proposals, so this seems like a mistake.