React webpack and babel configuration issue

Question

I'm getting this error when using webpack:

ERROR in ./src/pages/clients/components/ClientProfile.js
Module build failed: SyntaxError: Unexpected token (18:17)

  16 |     }
  17 | 
> 18 |     handleSubmit = (person) => {
     |                  ^
  19 |         console.log(person);
  20 |     };
  21 |

I have following .babelrc config

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

And here's my devDependencies from package.json

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "react-scripts": "0.9.5",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "start": "webpack-dev-server --info",
    "build": "webpack",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

And webpack.config.js as well

module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
                //include: /flexboxgrid/
            }
        ]
    }

I can't figure out why it's failing on this syntax

handleSubmit = (person) => {
        console.log(person);
    };

Does somebody have ideas? Thanks.

m.rohail.akram · Accepted Answer · 2017-05-09 13:15:07Z

1

I made following changes in your code and it works fine.

{
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015-native-modules": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0", //instead of preset-stage-3
}

and

{
  "presets": [
    "es2015",
    "react",
    "stage-0" //instead of "stage-3"
  ]

}

I'll read documentation and come up with the reason until someone else explains it. :)

edited May 9, 2017 at 13:15

answered May 9, 2017 at 12:48

m.rohail.akram

3501 silver badge11 bronze badges

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

Comments

Joe Clay · Accepted Answer · 2017-05-09 13:21:49Z

0

The proposal to add class fields to the language is currently at Stage 2 of the standardization process.

The Babel 'stage' presets work like so:

babel-preset-stage-0 only contains what's needed to support Stage 0 features.
babel-preset-stage-1 contains what's needed to support Stage 0 and 1 features.
And so on, up to babel-preset-stage-4.

Therefore, since you only have babel-preset-stage-3, you can't use class fields. To get this to work, you should uninstall that package, install babel-preset-stage-2, and then update your configuration files accordingly.

For more details on what exactly the different stages of the TC39 standardization process entail, take a look at the GitHub, and the process document.

answered May 9, 2017 at 13:21

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

Collectives™ on Stack Overflow

React webpack and babel configuration issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related