Compiling ES6 React code using laravel-mix

Question

I'm trying to compile React code that is using ES6 using laravel-mix and I am running into issues compiling things like arrow functions which are prevalent in ES6 from my understanding. So I have a webpack.mix.js file of:

mix.react('resources/assets/js/app.js', 'public/js/app.js')
    .js('resources/assets/js/cross-brand-nav.js', 'public/js/app.js')
    .js('resources/assets/js/FullWidthTabs.js', 'public/js/app.js')
    .version()
    .combine([
        'resources/assets/bower_assets/jquery/dist/jquery.min.js',
        'resources/assets/bower_assets/moment/min/moment.min.js',
        'resources/assets/bower_assets/bootstrap/dist/js/bootstrap.js',
        'resources/assets/bower_assets/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
        'resources/assets/js/admin.js'
    ], 'public/js/admin.js').version()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/bower_assets/components-font-awesome/scss/font-awesome.scss', 'public/css').version()
    .styles([
        'resources/assets/css/FullWidthTabs.css'
    ], 'public/css/pf.css')
    .styles([
        'resources/assets/bower_assets/bootstrap/dist/css/bootstrap.min.css',
        'resources/assets/bower_assets/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css'
        ], 'public/css/admin.css').version();

when I try to compile code like:

testFunction = () => {

    }

I get an error like so:

compile error Module build failed: SyntaxError: Unexpected token (51:17)

This is pointing right at that function. Any extra steps I need to take compile correctly in ES6?

Answer 1

Ok, I have seemed to solve my own issue here. First I needed to edit my .babelrc file to

{
  "presets": [
    ["es2016"],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

obviously installing the babel-plugin-transform-class-properties plugin and babel-preset-es2016, then things seem to compile and work more like I expected.