[SOLVED] ReactJS childContextTypes expressed in ECMA6 classes - building fails when use static

help
1

Hi,

I’m using Meteor 1.3 beta 11.

Recently I had issues trying to express some ReactJS code using ECMA6 classes. I’ve made simplified test, but the problem remains when I try to use static object:

component-test.jsx: Missing class properties transform.

Here’s code snipped:

export class Grandparent extends React.Component {

//-- This works, but I'd rather use static object
constructor() {
    super(...arguments);
    this.constructor.childContextTypes = {foo: React.PropTypes.string.isRequired};
}
// --

// -- this fails with: component-test.jsx: Missing class properties transform
//static childContextTypes = {
//    foo: React.PropTypes.string.isRequired
//};

getChildContext() {
    return {foo: "I m the grandparent"};
}

render() {
    return <Parent />;
}

}

// (Parent and Child components definitions)
// (…)

Original ECMA5 code looks as this:

var Grandparent = React.createClass({

childContextTypes: {
    foo: React.PropTypes.string.isRequired
},

getChildContext: function () {
    return {foo: "I m the grandparent"};
},

render: function () {
    return <Parent />;
}

});

What am I doing wrong? Looks like static does not work here.
I’ve found some stackoverflow discussion http://stackoverflow.com/questions/32078493/childcontexttypes-in-es6 but it’s all the same.

Could you help? Thanks in advance!

2

OK, just an update - I figured out that static comes with ECMA7, so not currently supported in Meteor 1.3

As workaround, this solution looks simplest and effective:

export class Grandparent extends React.Component {

// -- static childContextTypes comes with ECMA7
//static childContextTypes = { foo: React.PropTypes.string.isRequired };

getChildContext() {
    return {foo: "I m the grandparent"};
}

render() {
    return <Parent />;
}

}

// workaround for static (comes with ECMA7)
Grandparent.childContextTypes = {foo: React.PropTypes.string.isRequired};

3

Yep, I think that is what you need to do there but the syntax is not pretty.

How difficult is to add options to enable or add babel modules? For example I would definitely add stage-0 to my environment. I would also like to add: “transform-decorators-legacy” and “jsx-control-statements”.

Look also to: https://github.com/meteor/meteor/issues/6351

1 Like