0

When I try to use a fat arrow function inside a class Component I receive the following error...

ERROR in ./src/app/components/Home.js
Module build failed: SyntaxError: C:/myproject/whole/src/app/components/Home.js: Missing class properties transform.

However, I have the proper packages in my package.json

For Babel

"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-es2017": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",

For Webpack

"webpack": "3.5.6",
"webpack-dev-server": "2.8.2",
"webpack-merge": "4.1.0",
"webpack-node-externals": "1.6.0"

And I´m setting the rule in Webpack for Babel

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            'react',
            'stage-0',
            ['env', { targets: { browsers: ['last 2 versions'] } }]
          ]
        }
      }
    ]
  }

Note: I also tried adding 'es2015' here before 'react'. Also, tried installing babel-plugin-transform-class-properties, creating the .babelrc conf file and adding there the plugin with no results.

And this is my component:

import React, { Component } from 'react';

class Home extends Component {

  consoleHi = () => {
    console.log('Hi');
  };

  render() {
    return (
      <div>
        Hello
        <div>{this.consoleHi()}</div>
      </div>
    );
  }
}

export default Home;

If I transpile or use a "regular" function, it works.

  consoleHi() {
    console.log('Hi');
  }

What I´m missing? Thanks and good weekend.

Remember that I´m learning =)

Peter
  • 2,004
  • 2
  • 24
  • 57

1 Answers1

1

Try installing this plugin babel-plugin-transform-class-properties, then in your babel configuration, add transform-class-properties to the plugins array like so:

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

Oreoluwa Aboluwarin
  • 181
  • 1
  • 8