0

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"]
}
Saurabh Sharma
  • 2,422
  • 4
  • 20
  • 41

3 Answers3

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.

Community
  • 1
  • 1
Michael Peyper
  • 6,814
  • 2
  • 27
  • 44
  • I am going to `setState` in the `AuthMe()` that's why fat arrow to avoid bind – Saurabh Sharma May 09 '17 at 10:41
  • 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. – Patrick May 09 '17 at 11:57
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"]
}
Community
  • 1
  • 1
Joe Ruello
  • 1,196
  • 8
  • 4
-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;
Naveed Aheer
  • 1,715
  • 6
  • 25
  • 40