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?

David Jarrin · Accepted Answer · 2018-01-10 15:42:30Z

3

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.

answered Jan 10, 2018 at 15:42

David Jarrin

1,7594 gold badges21 silver badges41 bronze badges

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

2 Comments

FabricioG Over a year ago

in my setup I don't have a babelrc file. How did you setup react to work with laravel? @David Jarrin

David Jarrin Over a year ago

@fabricioG I believe I had to add the babelrc value myself.

dgpro · Accepted Answer · 2019-01-14 15:28:32Z

3

Arrow functions that are members of a class are not included yet. You need to install babel-transform-class-properties.

Run this command:

npm install --save-dev babel-plugin-transform-class-properties

And create a .babelrc file in the root directory of your project if doesn't exist an add this

{
  "plugins": ["transform-class-properties"]
}

or if you need to add some options

{
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

answered Jan 14, 2019 at 15:28

dgpro

3653 silver badges10 bronze badges

Collectives™ on Stack Overflow

Compiling ES6 React code using laravel-mix

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related