Webpack - Unexpected Token for Arrow function in Class - reactjs

Question

I am using webpack 4 with express and react, and babel 7. It always give me Unexpected Token error like the following:
SyntaxError: /var/www/nodejs/modules/react/ShareStates.jsx: Unexpected token (11:15) 9 | 10 | export class ShareStatesContextProvider extends Component {
> 11 | updatePath = (pathInput) => {
|
^ 12 | this.setState({
13 | path: pathInput
14 | })
I have already research on the web and those said I need to have #babel/plugin-proposal-class-properties. I added it and it doesn't work for me. Also, those results are around 2017. Is there any up to date answer to this issue?
Thanks
The code is
import React, { Component, createContext } from 'react';
//use context API reference
// https://www.taniarascia.com/using-context-api-in-react/
export const ShareStatesContext = createContext({
path: "",
updatePath: () => {}
});
export class ShareStatesContextProvider extends Component {
updatePath = (pathInput) => {
this.setState({
path: pathInput
})
}
state = {
path: "",
updatePath: this.updatePath
}
render() {
return (
<ShareStatesContext.Provider value={this.state}>
{this.props.children}
</ShareStatesContext.Provider>
);
}
}
The webpacke.config.js is
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, './client.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'public')
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
performance: {
hints: false
},
mode: process.env.environment,
resolve: {
extensions: ['.jsx', '.js']
},
plugins: [
new webpack.DefinePlugin({
'process.props': JSON.stringify(process.props),
'process.env': {
NODE_ENV: JSON.stringify(process.env.environment)
}
})
],
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-react',
'#babel/preset-env'
],
plugins: [
"#babel/plugin-transform-arrow-functions",
'#babel/plugin-proposal-class-properties']
}
}
},
]
}
}
Could you help me to figure out what I need to add to make it works?
The package.json is
{
"name": "nodejs",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "npm-run-all --parallel watch:server watch:build",
"watch:build": "webpack --watch --config ./webpack.config.js",
"watch:server": "nodemon --inspect=0.0.0.0 ./bin/www"
},
"dependencies": {
"abort-controller": "^3.0.0",
"apollo-boost": "^0.4.4",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bluebird": "^3.7.1",
"cookie-parser": "~1.4.4",
"core-js": "^3.3.6",
"cors": "^2.8.5",
"debug": "~2.6.9",
"express": "~4.16.1",
"express-graphql": "^0.9.0",
"express-session": "^1.17.0",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
"graphql-type-json": "^0.3.0",
"hjs": "~0.0.6",
"http-errors": "~1.6.3",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"ldapjs": "^1.0.2",
"luxon": "^1.21.1",
"morgan": "~1.9.1",
"nodemon": "^1.19.4",
"npm-run-all": "^4.1.5",
"react": "^16.11.0",
"react-bootstrap": "^1.0.0-beta.14",
"react-dom": "^16.11.0",
"regenerator-runtime": "^0.13.3",
"uuid": "^3.3.3"
},
"devDependencies": {
"#babel/core": "^7.7.0",
"#babel/plugin-proposal-class-properties": "^7.7.0",
"#babel/plugin-transform-arrow-functions": "^7.2.0",
"#babel/preset-env": "^7.7.1",
"#babel/preset-react": "^7.7.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}