CODEWITHSUNDEEP
reactjswebpackbabeljs
Dhruv Jain
Dhruv Jain

Reputation: 125

Webpack , babel error: Module build failed: SyntaxError: Unexpected token

Facing an Unexpected Token error on = after state, when compiling code using webpack. My code is as follows:

class GroceryItem extends React.Component {
    state = {
        labelValue: "Hello Pages"
    };        
    render() {
        return ( < div onClick = {
                this.state.labelValue
            } > ded

            <
            /div>);
        }
    }

I have tried various methods I found on StackOverflow, but none seems to work.

.bablerc

{
   "presets" : ["es2015", "react"]
}

.webpack..config.js

var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public/js/');
var APP_DIR = path.resolve(__dirname, 'src/components');
var config = {
  entry: APP_DIR + '/main.jsx',
  output: {
  path: BUILD_DIR,
  filename: 'bundle.js'
 },
module : {
    loaders : [
      {
        test : /\.jsx?$/,
        include : APP_DIR,
        loader : 'babel',
        query:{
            presets: ['react']
        }
      }
    ]}
};

module.exports = config;

Upvotes: 0

Views: 676

Answers (1)

Anurag Awasthi
Anurag Awasthi

Reputation: 6233

You need babel-preset-stage-x preset to declare class like that. See this repl

{
    presets: ["react", "es2015", "stage-2"]

}

Upvotes: 2

Related Questions