ECMAScript 5 - Error Missing class properties transform

Question

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

Matteo Basso · Accepted Answer · 2016-09-25T21:02:55.843

1

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.

edited Sep 25 '16 at 21:02

answered Sep 19 '16 at 22:21

Matteo Basso

2,694
2
14
21

1

You should add a note that this isn't ES6 either. – Bergi Sep 19 '16 at 22:33
Unexpected token now > 17 | InitVal = { – Koala7 Sep 20 '16 at 20:19
se here the full component in the gist https://gist.github.com/Mannaio/48b32baee4bb820f7f2b1d62f4dc6274 – Koala7 Sep 20 '16 at 20:24
1

I just notice that you are using `stage-0`, `transform-class-properties` is included in `stage-2`, so you don't have to include it manually in `.babelrc` under `plugins`. I have the following configuration and works fine: `"presets": ["es2015", "stage-0", "react"]`. Have you also tried to delete `node_modules` and run `npm install`? – Matteo Basso Sep 21 '16 at 14:28
yes i should have installed npm install --save-dev babel-preset-stage-0, get different error now var viewBoxParametersWidth = initVal.viewBoxParametersWidth; ^ ReferenceError: initVal is not defined, same gist https://gist.github.com/Mannaio/48b32baee4bb820f7f2b1d62f4dc6274 – Koala7 Sep 25 '16 at 18:52
1

At line [5](https://gist.github.com/Mannaio/48b32baee4bb820f7f2b1d62f4dc6274#file-react-component-manna-L5) `InitVal` is written with an uppercase `i` while at line [39](https://gist.github.com/Mannaio/48b32baee4bb820f7f2b1d62f4dc6274#file-react-component-manna-L39) is written with a lowercase `i`: `initVal`. I also noticed that your `render` method returns an Object Literal, which is invalid, you have to return a single child element as explained [here](https://facebook.github.io/react/docs/component-specs.html#render) – Matteo Basso Sep 25 '16 at 19:06
grazie Matteo! I uppercase was not sensitive case but you point me to the right direction here https://facebook.github.io/react/docs/reusable-components.html#es6-classes, update the answer so i can accept it – Koala7 Sep 25 '16 at 20:36

ECMAScript 5 - Error Missing class properties transform

1 Answers1