Errors with Flow, ReactJS and ES6 classes

Question

Why are these errors showing with flow. I'm using React with ES6 classes. Code example is below:

UPDATE

I almost got this working based on this example: https://flowtype.org/docs/react.html#defining-components-as-react-component-subclasses

I got rid of most of the Flow errors, but now app fails when run it. I think this is ReactJS not stripping out the Flow or Babel class stuff. If I comment out the Flow type defs in my code below I don't get this error.

I'm running my app with watchify -t [ babelify ] app.js -o ./build/app.js

SyntaxError: /Users/carlf/Documents/dev/reactjs/FlyTweet/app/views/posts/MyNewPostForm.js: Missing class properties transform. while parsing file: /Users/carlf/Documents/dev/reactjs/FlyTweet/app/views/posts/MyNewPostForm.js

Flow Errors:

app/views/posts/MyNewPostForm.js:51 51: var myPostTxt = ReactDOM.findDOMNode(this.Refs.content).value; ^^^^ property Refs. Property not found in 15: export default class MyNewPostForm extends React.Component { ^^^^^^^^^^^^^ MyNewPostForm

From package.json

  "dependencies": {
    "babel-preset-react": "6.5.0",
    "babelify": "7.3.0",
    "react": "15.1.0",
    "react-dom": "15.1.0",
    "react-router": "2.4.1"
  }

React Component

export default class MyNewPostForm extends React.Component {

  // START Flow type definitions.
  MAX_POST_CHARS: number; 

  state: {
      charsRemaining: number,
      SendButtonDisabled: boolean
  };

  handleChange: () => void;
  onSubmit: () => void;
  // END Flow type definitions.

  constructor() {
    super();

    this.MAX_POST_CHARS = 139;

    this.state = {
        charsRemaining: this.MAX_POST_CHARS,
        SendButtonDisabled: true
    };

   this.handleChange = this.handleChange.bind(this);    
   this.onSubmit = this.onSubmit.bind(this);    

  }

  handleChange() {
     var myPostTxt = ReactDOM.findDOMNode(this.refs.content).value;

     // Do something here.
  }

When creating a component using flow, you have to provide type parameters in your class declaration to describe the types of your props, default props, and state. Here's a useful article — nem035
I was following the official Flow / React ES6 example here and couldn't get this working either: flowtype.org/docs/… — Giant Elk
Also what kinda irks me is with non-React running flow on a JS file won't show any errors until AFTER you add type annotations. But with React ES6 it's forcing me to add type annotations. — Giant Elk

timofeyka timofeyka · Accepted Answer · 2016-07-20T14:37:51

May be the only flow error is capital R in Refs? It is in lower case in code you provided, but in the error message it is capital.

Errors with Flow, ReactJS and ES6 classes

1 Answers