ReactJS Syntax Error: Unexpected Token

Question

I am getting the Unexpected Token on my ReactJS application. But I believe the syntax is correct.

import React, { Component } from 'react';

class Auth extends Component {
    constructor(){
        super()
        this.state={
            authStatus: "Sign In",
            isAuthenticated: false
        }
    }
    AuthMe = () =>{
        console.log("Working")
    }
    render() {
        return (
            <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
        );
    }
}

export default Auth;

ERROR in ./src/components/Auth/index.js Module build failed: SyntaxError: Unexpected token (11:11)

> 11 |     AuthMe = () =>{
     |            ^
  12 |         console.log("Working")
  13 |     }

What am I missing?

UPDATE

Here's my webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: [
        path.resolve(__dirname, 'node_modules'),
      ],
      loader: 'babel-loader',
    }]
  },
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.css']
  },
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true
  }
};

.babelrc

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy"]
}

So your code is definitely valid, compiles fine in the Babel REPL. Looks like something to do with your webpack config. - Can you show me your file structure? package.json as well? — Joe Ruello
– Joe Ruello, Commented May 9, 2017 at 11:40

Community · Accepted Answer · 2017-05-23 11:54:44Z

0

Try:

class Auth extends Component {
    constructor(){
        super()
        this.state={
            authStatus: "Sign In",
            isAuthenticated: false
        }
    }
    AuthMe() {
        console.log("Working")
    }
    render() {
        return (
            <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
        );
    }
}

NOTE: AuthMe is not just a regular function and not a fat-arrow function, if that matters to you.

EDIT (after comment)

Using fat-arrow functions as class functions is not standard ES6 syntax (the proposal is stage-2 at the moment), so you will need an additional babel plugin to add the feature.

See this answer for more details.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 9, 2017 at 10:40

Michael Peyper

6,9642 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saurabh Sharma Over a year ago

I am going to setState in the AuthMe() that's why fat arrow to avoid bind

Patrick Over a year ago

simply add the bind. I don't understand why people are so against adding a binding line, it's MUCH better to add a binding line than to rely on some stage-2 proposals.

Community · Accepted Answer · 2017-05-23 10:31:27Z

0

I answered this question before here: Arrow Function syntax not working with webpack?

TLDR Is that that fat arrow is not yet in the ES201whatever standard. You'll need to add an additional babel transform.

npm install --save-dev babel-plugin-transform-class-properties

EDIT: saw your babelrc config above, run the above then change .babelrc to

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered May 9, 2017 at 11:24

Joe Ruello

1,2069 silver badges4 bronze badges

1 Comment

Saurabh Sharma Over a year ago

That comes in stage-0 as well

Naveed Aheer · Accepted Answer · 2017-05-09 11:11:49Z

-2

use var AuthMe or const AuthMe instead of AuthMe

import React, { Component } from 'react';

    class Auth extends React.Component {
        constructor(){
            super()
            this.state={
                authStatus: "Sign In",
                isAuthenticated: false
            }
        }
        var AuthMe = () =>{
            console.log("Working")
        }
        render() {
            return (
                <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
            );
        }
    }

    export default Auth;

edited May 9, 2017 at 11:11

answered May 9, 2017 at 10:47

Naveed Aheer

1,8456 gold badges27 silver badges42 bronze badges

1 Comment

Saurabh Sharma Over a year ago

I don't think that will make any difference

Collectives™ on Stack Overflow

ReactJS Syntax Error: Unexpected Token

UPDATE

3 Answers 3

EDIT (after comment)

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

3 Answers 3

EDIT (after comment)

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related