Laravel-mix: React compile error Module build failed: SyntaxError: Unexpected token (51:17)

[djarrin]

Laravel mix version - 1.7.2
Node Version - 6.11.5
NPM version - 5.6.0
OS - macOS High Sierra 10.13.2

I am having some trouble compiling what I perceive as some es2015 react code. Some sample code of what I am trying to compile is below:

DOESN'T WORK

testFunction = () => {

    }

WORKS

testFunction() {

    }

or
DOESN'T WORK

state = {
            days: 0,
            hours: 0,
            minutes: 0
        };

WORKS

constructor(){
        super();
        this.state = {
            days: 0,
            hours: 0,
            minutes: 0
        };
    }

my .babelrc file in my root directory looks like

{
  "presets": [
    ["es2015", {
      "modules": false
    }],
    "react"
  ]
}

my webpack.mix.js file looks like:

mix.js('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()
    .react('resources/assets/js/components/NextChallengeCounter.jsx', 'public/js/components')
    .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();

and my package.json file looks like:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.1.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.7.2",
    "lodash": "^4.17.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "vue": "^2.5.13"
  },
  "dependencies": {
    "moment": "^2.20.1"
  }
}

then when I run npm run dev I get the error mentioned in the title. Help is much appreciated.

[djarrin]

So I've learned I need to be using es2016, I've tried using this strategy: https://babeljs.io/docs/plugins/preset-es2016/
but still getting this error:

ERROR in ./resources/assets/js/components/NextChallengeCounter.jsx
Module build failed: SyntaxError: Unexpected token (23:17)

  21 |     //     clockLabel: ''
  22 |     // };
> 23 |     testFunction = () => {
     |                  ^
  24 |         let somevar = 'this is the var';
  25 |     };
  26 | 

 @ multi ./resources/assets/js/components/NextChallengeCounter.jsx

becoming pretty frustrating, could use some help on this one.

[djarrin]

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.

[mudrila]

Thanks for that, it's solve same issue for me

[goelmk]

Thanks @djarrin! It solved the same issue for me. Appreciate your help!

[KDOUMBIA]

@djarrin Thks for your help :D

[entymon]

Thanks @djarrin, your solution did not help me but you gave me some idea to resolve my problem, I found solution which works for me.
```
{
"presets": ["es2015", "stage-0", "react"],

"plugins": [
"react-hot-loader/babel"
]
}

[kimchanpong]

great! thanks!!!

[edwinharly]

@entymon does your react-hot-loader working mate ?

[entymon]

@edwinharly it was working well when I used it. 2 month ago I left this project temporally and I am working on different one, so it's difficult to say. If there are other packages changed in meantime then maybe not. It will be nice if you can test it for yourself and let me know.

[edwinharly]

@entymon it's not working for me, I've been trying for days

[entymon]

@edwinharly , Sorry for this delay. I don't know what are you trying to do. If you are trying resolve the issue for the company you work for then it will be quiet difficult to help you but if you do some side project and you can share it then I have a look on my free time and may be help you a bit.

[edwinharly]

@entymon The only issue in my case is the react-hot-loader didn't work, so I've got to click these buttons to see the changes I've made and it's company's project so I can't share anything, thx anyway.

[antonrud]

I've experienced the same problem and found the solution which is working for me.
This page was helpful: https://babeljs.io/docs/en/babel-plugin-transform-class-properties/

However the main problem was in my webpack config. Just deleted Babel options from _webpack.config.js_ and used only _.babelrc_ configuration instead.

webpack.config.js before

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {presets: ['env', 'react']}  //bad line here
      },
...

webpack.config.js after

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
...

My .babelrc

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

AND! Don't forget to install:
npm install --save-dev babel-plugin-transform-class-properties

Please note that "es2016" preset is deprecated now. Use "env" instead.

[theshashiverma]

@djarrin but it didn't solve my issue , i'm also facing the same issue but its with reactjs and laravel and when i do changes in my .babelrc file, it removes all these casing error from the console or terminal and show some casing error i think that is because i have App.js and app.js , please do insist me, thank you

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jahangir83]

Thank you very much, I am very helful your solution

[Sokunthaneth]

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.
In case you can't find _.babelrc_ file, you have to create one file and copy above config into that file. Create new .babelrc at the root of your project directory. Hope it help you! 😁