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"]
}