Flow: Class property syntax incompatible with Babel

[tmcw]

Sorry - not sure whether to report this here or in Babel's tracker. The syntax suggested in the documentation on classes, interpreted like this:

class ErrorWithStatus extends Error {
  status: number;
  constructor(message: string, status: number) {
    super(message);
    this.status = status;
  }
}

Passes through Flow, but isn't compatible with the suggested strip-types transform:

SyntaxError: /Users/tmcw/src/studio/src/util/xhr.js: Missing class properties transform. while parsing file: /Users/tmcw/src/studio/src/util/xhr.js

The rest of Flow's annotations are correctly removed, and babel & plugins is up to date, with babelrc:

{
    "presets": [
        "stage-0",
        "es2015",
        "react"
    ],
    "plugins": ["transform-inline-environment-variables"]
}

[steelsojka]

I believe you need the babel-plugin-syntax-flow for parsing flow types in babel... or is this included in the react preset?

[GGAlanSmithee]

Looks like it's included in the react preset

[AprilArcus]

Does it work with babel-plugin-transform-class-properties?

[tmcw]

The class properties transform is already included by virtue of using the -stage-0 preset

└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

[nikita-gazarov-hs]

You need to put stage-0 at the end of your list of presets. See:

https://phabricator.babeljs.io/T6719
https://phabricator.babeljs.io/T6730
https://github.com/babel/babel/pull/3281

[samwgoldman]

Thanks @nikita-gazarov-hs for answering this puzzler. Going to close this because a) there's a solution and b) it's not a Flow issue. Hope people can find this answer through search.

[pixelpunch]

The react-toolbox-example works fine on Meteor. But I am repeatedly getting Missing class properties transform. on my console whenever I try to use any of the react-toolbox components, except 'Avatar' which works fine. I tried adding presets to the .babelrc file and other things suggested here, but none work. Can someone please help explain this?

import React from 'react';
import ReactDOM from 'react-dom';
import Input from 'react-toolbox/lib/input';

export default class InputTest extends React.Component{

    state = { name: '', phone: '', email: '', hint: '' };

    handleChange = (name, value) => {
    this.setState({...this.state, [name]: value});
    };


    render() {
      return (
          <section>
            <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
            <Input type='text' label='Disabled field' disabled />
            <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
            <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
            <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
         </section>
      )
    }

}; `

[csterritt]

Hi -- I'm getting the same problem as @pixelpunch described above.

In case it helps, here's my package.json:

{
  "name": "Test",
  "version": "1.0.0",
  "description": "Front End Test",
  "main": "index.js",
  "dependencies": {
    "material-ui": "^0.15.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-fontawesome": "^1.1.0",
    "react-redux": "^4.4.5",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "whatwg-fetch": "^1.0.0"
  },
  "devDependencies": {
    "@kadira/storybook": "^1.24.0",
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-class-properties": "^6.9.1",
    "babel-plugin-transform-flow-strip-types": "^6.8.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "expect": "^1.14.0",
    "expect-jsx": "^2.3.0",
    "flow-bin": "^0.26.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^15.0.1",
    "redux-devtools": "^3.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "start": "webpack-dev-server -d",
    "test": "mocha './src/**/*.spec.js' --compilers js:babel-core/register",
    "storybook": "start-storybook -p 9001"
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "stage-0"
    ],
    "plugins": [
      "transform-class-properties",
      "transform-flow-strip-types"
    ]
  }
}

and the start of my class that uses Flow:

/* @flow */

import React, {Component, PropTypes} from "react";
import {connect} from "react-redux";

import {mapDispatchToProps} from "./actions/mappers";

type CurrentArticle = {
  content: string,
  id: number,
  name: string,
};

class ArticleContent extends Component {
  props: {
    category_id: number,
    current_article: CurrentArticle,
    editing: bool,
    saveEditing: (id: number, cat_id: number, name: string) => void,
    startEditing: (id: number) => void,
  };

  state: {
    content_value: string;
  };

  defaultProps: { visited: boolean };

  constructor(props) {
    super(props);
    (this:any).isNotChanged = this.isNotChanged.bind(this);
    (this:any).onChangeContent = this.onChangeContent.bind(this);
    (this:any).onModify = this.onModify.bind(this);
    (this:any).onSave = this.onSave.bind(this);
    (this:any).onUndo = this.onUndo.bind(this);
    (this:any).dangerous = this.dangerous.bind(this);
    (this:any).state = {
      content_value: props.current_article.content
    };
  }

The flow compiler is perfectly happy with the above, but trying to run webpack gives the Missing class properties transform. error.

I wrote a program to try all the permutations of "presets" and "plugins", and no such combination works.

Any help appreciated!

Solution found:

Turns out I had babel configuration in both my package.json _AND_ my webpack.config.js, and I was only changing one.

I removed the babel configuration from those two files, created a .babelrc, put the right configuration there and it worked.

[pixelpunch]

Just to let you know, my issue was a different one - nothing to do with Babel - but more with how ES6 is written - _constructor class and private object property_ - here is the explanation - [(https://github.com/react-toolbox/react-toolbox/issues/530)]