Koala7 Koala7 - 2 months ago 13
Javascript Question

ECMAScript 5 - Error Missing class properties transform

I am implementing the

Class extend
and i get this error Missing class properties transform.

The Component was

import React from ('react')

const Manna = React.createClass({,

initVal: {
likes: 10,
}

render() {
// code
return {
// code
}

}

});

module.exports = Manna


and changed to

import React from 'react';

export default class Manna extends React.Component {

InitVal: {
likes: 10
}

render() {
// code
return {
// code
}

}

};


This is my configuration in webpack.config.dev.js

{
test: /\.js$/,
loaders: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0',
include: path.join(__dirname, 'client')
},


I have changed the loader following this answer

Before it was
loaders: ['babel']


I have also added to .babelrc the plugin

["transform-class-properties"],


This is the error in the console

Missing class properties transform.
15 | // },
16 |
> 17 | InitVal: {
| ^
18 | likes: 10,
19 | code: "2",
20 | size: 350,


I do not understand why it is complaining now for Missing class properties transform, what is wrong in the component?, everything was working fine before of these changes

Here a gist with the full React component

Answer

Try with =

import React from 'react';

export default class Manna extends React.Component {

  InitVal = {
    likes: 10
  }

  render() {
     // code
    return {
       // code
    }

  }

};

Check this

UPDATE

Since we are using stage-0 and transform-class-properties is included in stage-2, we don't have to include it manually in .babelrc under plugins. The following configuration works fine: "presets": ["es2015", "stage-0", "react"].

In the gist at line 5 InitVal is written with an uppercase i while at line 39 is written with a lowercase i: initVal. Additionally render method returns an Object Literal, which is invalid, a single child element as to be returned as explained here.

Here is the official documentation for react components defined as es6 classes.

Comments