Missing class properties transform

Question

So i have just tried to get the google material dialog box. I am very new to meteor and react so the answare might be more obvious for you then for me.

even so, my console are giving me this error:

Missing class properties
   transform.

on line 16 in this file:

export default class DialogExampleCustomWidth extends React.Component {

  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton label="Dialog With Custom Width" onTouchTap={this.handleOpen} />
        <Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          contentStyle={customContentStyle}
          open={this.state.open}
        >
          This dialog spans the entire width of the screen.
        </Dialog>
      </div>
    );
  }
}

the error appears on the state = { i have read on multiple articals but can't seem to get it. Thank you for your help and time

Answer 1

Meteor does not support arrow functions by default, but today you can simply change that:

add the following package:

meteor npm install --save-dev babel-plugin-transform-class-properties

Edit your package.json in your project and add there the following to make the package work:

 "babel": {
    "plugins": ["transform-class-properties"]

  }