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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18

Most upvoted comments

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.

+92

djarrin on Jan 10, 2018

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 on Jan 10, 2018

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.

antonrud on Aug 7, 2018

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"
  ]
}

entymon on Apr 13, 2018