Unable to compile JSX using web-pack with babel loader

Question

I am trying to bundle a react app, using web-pack which uses babel loader to compile jsx files that fails for the syntax error.

  handleClick = () => {
    this.props.handleFixedClick();
  };

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (37:14)

  35 |   }
  36 |
> 37 |   handleClick = () => {
     |               ^
  38 |     this.props.handleFixedClick();
  39 |   };
  40 |

I tried changing the babel-loader version to 7.15 but to no effort. Following is my web-pack.config.js.

   test: /\.jsx?/,
   loader: 'babel-loader',
   exclude: /node_modules/,
   query:{
     presets: ['react','es2015']
   }

Following is my package.json

"@babel/core": "^7.5.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

Answer 1

to use the class properties syntax ( eg lambdas inside a class) you also need the babel plugin @babel/plugin-proposal-class-properties

install it with npm install --save-dev @babel/plugin-proposal-class-properties

Answer 2

Try using babels transform-arrow-functions plugin. ( v7 / v6 ) Also decide on using version 6 of 7 of babel and go with it don't keep both of them as there are some breaking changes between them.