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
– nem035, Commented Jun 4, 2016 at 5:59
I was following the official Flow / React ES6 example here and couldn't get this working either: flowtype.org/docs/… — Giant Elk
– Giant Elk, Commented Jun 6, 2016 at 17:00
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
– Giant Elk, Commented Jun 9, 2016 at 2:00

timofeyka · Accepted Answer · 2016-07-20 14:37:51Z

1

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.

answered Jul 20, 2016 at 14:37

timofeyka

3002 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gabe Levi Over a year ago

Yep, this is the right answer. Flow knows that React.Component classes have a ref property and class properties are case sensitive

Collectives™ on Stack Overflow

Errors with Flow, ReactJS and ES6 classes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related