Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Errors with Flow, ReactJS and ES6 classes

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.
  }
like image 723
Giant Elk Avatar asked Nov 09 '22 14:11

Giant Elk


1 Answers

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.

like image 84
timofeyka Avatar answered Nov 14 '22 22:11

timofeyka