Webpack babel-loader not parsing arrow function

Question

I am adding some react to an existing website and am trying to set up webpack and babel. Webpack works correctly when I don't try to include arrow functions or spread. When I do try to include those, I get an "unexpected token" error. I have searched for hours, so any help with this would be great. I am on Windows.

webpack.config.js

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

module.exports = {
    entry: {
        homeRefine: [path.join(__dirname, './js/react/src/home-refine.js')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["es2015", "react"]
                }
            }
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, './js/react/dist')
    }
};

package.json

{
  "name": "blank",
  "version": "1.0.0",
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-postcss": "^6.1.1",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.14.0"
  },
  "scripts": {
    "pack": "webpack --config webpack.dev.config.js",
    "watch": "webpack --watch --config webpack.dev.config.js",
    "production": "webpack --config webpack.prod.config.js"
  }
}

HomeSearchRefine.js

import React from 'react';

class HomeSearchRefine extends React.Component {
    constructor() {
        super();
        this.state = {
            arkona: "cag"
        };
    }

    componentWillMount() {
        fetchCars(this.state.arkona);
    }

    fetchCars = (arkona) => {
        console.log(arkona);
    };

    render() {
        return (
            <div className="search-filters">
                <p>Hello world</p>
            </div>
        )
    }
}

export default HomeSearchRefine;

terminal output

C:\dev\websites\choice\Choice (homepage-react) (choice@1.0.0)
λ npm run pack

> choice@1.0.0 pack C:\dev\websites\choice\Choice
> webpack --config webpack.dev.config.js

Hash: 6dca2e265a78f9c74bb5
Version: webpack 1.14.0
Time: 2493ms
               Asset    Size  Chunks             Chunk Names
homeRefine.bundle.js  740 kB       0  [emitted]  homeRefine
   [0] multi homeRefine 28 bytes {0} [built]
    + 179 hidden modules

ERROR in ./js/react/src/components/HomeSearchRefine.js
Module build failed: SyntaxError: C:/dev/websites/choice/Choice/js/react/src/components/HomeSearchRefine.js: Unexpected token (15:11)

  13 |  }
  14 |
> 15 |  fetchCars = (arkona) => {
     |            ^
  16 |          console.log(arkona);
  17 |  };
  18 |

 @ ./js/react/src/home-refine.js 9:24-64

Answer 1

ES2015 only support class methods , not class properties . So:

class SomeClass {
  // these are valid:
  instanceMethod() { }
  static classMethod() { }

  // these are not valid:
  someProperty = 3;
  invalidMethod = () => { }
  alsoInvalidMethod = function() { }
}

If you want to enable this feature (which is not yet standard ), you should add the transform-class-properties plugin to your Babel configuration.

As a side note, note that when using arrow functions in classes in this way, this inside that arrow function won't refer to an instance of the class, but—as with all other arrow functions—the this value of the parent scope. (As @loganfsmyth commented, this is not the case for class properties.)

Answer 2

define fetchCars in your component like this

fetchCars(arkona) {
  console.log(arkona);
}