Unexplained syntax error

Question

I am running into a syntax error that I simply cannot explain.

Code:

import React, { Component } from 'react';

class Button extends Component{
  handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        +{this.props.incrementValue}
      </button>
    );
  }
}

Error Message - Unexpected token (4:14):

  2 |
  3 | class Button extends Component{
> 4 |   handleClick = () => {
    |               ^
  5 |     this.props.onClickFunction(this.props.incrementValue)
  6 |   }
  7 |

I had this code working before, but I wanted to experiment with webpack and since those changes, I am receiving this error. To my understanding, this is a new syntax introduced in es2015. I believe I have everything properly configured:

  "devDependencies": {
    "axios": "^0.17.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.0.0-beta.2",
    "font-awesome": "^4.7.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-fontawesome": "^1.6.1",
    "react-scripts": "1.0.17",
    "reactstrap": "^5.0.0-alpha.4",
    "webpack": "~3.9.1",
    "webpack-dev-server": "^2.9.5"
  }

module.exports = {
    entry: "./index.js",
    output:{
        filename:"public/bundle.js"
    },
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query:{
                    presets:['react', 'es2015']
                }
            }
        ]
    }
}

My first thought was, maybe my configuration for es2015 is incorrect. But I tried using the normal function syntax and still received the following error:

  2 |
  3 | class Button extends Component{
> 4 |   handleClick = function(){
    |               ^
  5 |     this.props.onClickFunction(this.props.incrementValue)
  6 |   }
  7 |

score 2 · Accepted Answer · edited Dec 02 '17 at 23:23

2

You need to install babel-preset-stage-0 as a dev dependency like this :

npm install --save-dev babel-preset-stage-0

and preferably as mentioned in the documentation you need to add it to the .babelrc file , (you can create a .babelrc file in the root directory same place where webpack.config.js is ) and add like this :

    {"presets":["react", "es2015", "stage-0"]}

Or if you prefer inside webpack.config.js as you are using , in your query object you can do :

  query: {presets:["react", "es2015", "stage-0"]}

edited Dec 02 '17 at 23:23

Nick

35
4

answered Dec 02 '17 at 22:40

Aaqib

9,942
4
21
30

I think that might have done the trick! I need to iron out some other issues, before I can get it to compile. I will let you know asap. – Nick Dec 02 '17 at 23:09
thats fine , any problem let me know :) – Aaqib Dec 02 '17 at 23:18
1

That did it! Thanks! – Nick Dec 02 '17 at 23:19
glad to help you out :) – Aaqib Dec 02 '17 at 23:20

score 0 · Answer 2 · answered Dec 02 '17 at 22:20

0

You would need to add the transform-class-properties plugin
And add it to the configuration of babel:

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

answered Dec 02 '17 at 22:20

Sagiv b.g

30,379
9
68
99

Thanks for your response. I made the changes you suggested, but I now get a "Missing class properties transform." error on the same line. – Nick Dec 02 '17 at 22:40
1

do you use webapck and have another configuration for babel in your webpack loaders? – Sagiv b.g Dec 02 '17 at 22:42
The only configuration I have is the one I posted in the question. – Nick Dec 02 '17 at 22:50
1

if you are using a `.babelrc` file then you don't need `query` part in your webpack loader. if you don't have a `.babelrc` file then add `'stage-0'` preset to the end of the array in your babel query property (in webpack) – Sagiv b.g Dec 02 '17 at 23:15

Unexplained syntax error

2 Answers2

Linked