refs in React - React.createRef() - Module build failed: SyntaxError: Unexpected token

Question

Trying to implement a relative simple input form via using some Refs. Unfortunately I get always a "Module build failed: SyntaxError: Unexpected token" error.

Tried to do it how it is recommended in React 16.3+ with React.createRef() as well as the old way with a ref={(input) => this.title = input} inline of the input.

---

Here is the component for option 1:

import React from 'react';

class AddTextForm extends React.Component {

submit = () => {
  console.log(this.title.value)
  }

  render () {
    return (
      <div>
        <form>

          <input name="title" ref={(input) => this.title = input} type="text" placeholder="Add title" />   
          <button type="submit" onClick={this.submit} className="detailsctabutton w-button">Add Text</button>
        </form>
      </div>
    );
  }
}
export default AddTextForm;

And this is the error:

/src/components/AddTextForm.js
Module build failed: SyntaxError: Unexpected token (5:7)

  3 | class AddTextForm extends React.Component {
  4 | 
> 5 | submit = () => {
    |        ^
  6 |   console.log(this.title.value)
  7 |   }
  8 | 

---

Here is the component option 2:

import React from 'react';

class AddTextForm extends React.Component {

  titleRef = React.createRef();

  createText (event) {
    event.preventDefault();
    const text = {
      title: this.titleRef.value.value
    };
    console.log(text);
  };

  render () {
    return (
      <div>
        <form onSubmit={this.createText}>

          <input name="title" ref={this.titleRef} type="text" placeholder="Add title" />

          <button type="submit" className="detailsctabutton w-button">Add Text</button>
        </form>
      </div>
    );
  }
}
export default AddTextForm;

and this is the error for option 2:

./src/components/AddTextForm.js
Module build failed: SyntaxError: Unexpected token (5:11)

  3 | class AddTextForm extends React.Component {
  4 | 
> 5 |   titleRef = React.createRef();
    |            ^
  6 | 
  7 |   createText (event) {
  8 |     event.preventDefault();

---

The code that I try to implement is also part of a tutorial, so that should obviously work, but I have no clue why not in this case.

Is this an issues with my setup? Webpack? (sorry, newbie to Webpack)

Here is the webpack.config.js

const path = require('path');
const webpack = require('webpack');

// copy manifest.json to the path: 'public/build'
// this will allow for the authRequest to see the file at www.example.com/manifest.json
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ManifestAssetPlugin = new CopyWebpackPlugin([ { from: 'src/assets/manifest.json', to: 'manifest.json' } ]);
const IconAssetPlugin = new CopyWebpackPlugin([ { from: 'src/images/icon-192x192.png', to: 'icon-192x192.png' } ]);
const UglifyEsPlugin = require('uglify-es-webpack-plugin');
const UglifyEsPluginConfig = new UglifyEsPlugin({
    mangle: {
        reserved: [
                    'Buffer',
                        'BigInteger',
                        'Point',
                        'ECPubKey',
                        'ECKey',
                        'sha512_asm',
                        'asm',
                        'ECPair',
                        'HDNode'
                ]
        }
})


const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: './src/index.js',
  target: 'web',
  output: {
    path: path.resolve('public/build'),
    filename: 'index_bundle.js',
  },
  devServer: {
    historyApiFallback: {
      disableDotRule: true
    },
    watchOptions: { aggregateTimeout: 300, poll: 1000 },
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
    },
  },
  module: {
    rules: [
      { test: /\.json$/, use: 'json-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'file-loader!url-loader',
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig, 
    ManifestAssetPlugin, 
    IconAssetPlugin,
    UglifyEsPluginConfig
 ]
}

Here are the dependencies:

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "path": "^0.12.7",
    "style-loader": "^0.16.1",
    "uglify-es-webpack-plugin": "^0.10.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-router-dom": "^4.2.2"
  }
}

Thanks for helping out! Drives me crazy for two days.