Babel 6 and Flow Annotations

13 March 2016

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

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.