React webpack and babel configuration issue - reactjs

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.

Answer 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. :)

Answer 2

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.