Low-Tech Fix for "Missing class properties transform" Errors?

help
1

A lot of coders are encountering “Missing class properties transform” errors, as some ES7 syntax is not yet supported by Babel. E.g.:

class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {open: false};
    }

    handleToggle = () => this.setState({open: !this.state.open}); **//ERROR: Missing class properties transform**

.....

I’ve tried running:

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

…and editing .babelrc to:

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": ["react-require", "babel-root-slash-import", "transform-class-properties"]
}

…but I’m still getting the “Missing class properties transform” error.

While support for this syntax is pending, might it be possible to just use the syntax Babel would transpile it to?

If so, what is the equivalent ES5 version of this line?

handleToggle = () => this.setState({open: !this.state.open});
1 Like
2

Got the answer, thanks to Matt Brooks:

handleToggle() {
  this.setState({open: !this.state.open});
};
3

Just a quick note that .babelrc wasn’t supported (and was ignored*) before Meteor 1.3.3 (currently at beta.2).

Had you used a later version of Meteor, your “high-tech” fix :wink: was almost right, just that you have an existing .babelrc (from mantra?) which would break Meteor. You actually don’t want the es2015 preset, since the auto-included meteor preset already covers this in the way needed for Meteor, and likewise, react is unecessary. Lastly, babel-root-slash-import will break Meteor and should be removed.

Note, transform-class-properties is also included in the stage-1 preset; but it’s definitely safer to enable these features as-needed.

* For the sake of correctness, there was an early release of Meteor 1.2 that worked with .babelrc by accident, that more often than not it would break Meteor (it would read a .babelrc from outside your project dir too). It was disabled shortly after.

4

Thanks, @gadicc. I now have it working, in 1.3.3 beta, with this .babelrc:

{
  "plugins": [
    "transform-class-properties"
  ]
}
2 Likes
5

But how can i setup this on my package? I seems does not work on inside packages folder

6

I have the same problem. Is it possible to transform class properties in local packages code as well?

7