Can't get arrow functions to work (React, Babel, Webpack, ES6)

Question

Desperately hoping i'll be able to find someone who can tell why i can't get arrow functions to work with my Webpack / Babel setup, been trying a bunch of stuff and nothing has worked so far. Current state of the project:

Package.json:

{
  "name": "..",
  "version": "1.0.0",
  "description": "..",
  "main": "app.jsx",
  "author": "..",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-react-jsx": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "css-loader": "^0.26.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  }
}

webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/router.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  watch: true,
  module: {
    loaders: [
      {
         test: /\.jsx$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015']
         }
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
    ]
  }
};

.babelrc

{
  "plugins": [
    "transform-react-jsx",
    "transform-class-properties"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
}

Component:

import React from 'react'

import './styles.scss'

class Button extends React.Component {
  asdf = () => {
    return ['btn', this.props.size].join(' ')
  }

  render() {
    return (
      <button className={this.asdf}>
        {this.props.children}
      </button>
    )
  }
}

export default Button

Error:

ERROR in ./src/app/ui-kit/button.jsx
Module build failed: SyntaxError: Missing class properties transform.

  4 |
  5 | class Button extends React.Component {
> 6 |   asdf = () => {
    |   ^
  7 |     return ['btn', this.props.size].join(' ')
  8 |   }
  9 |

 @ ./src/app/components/signup.jsx 13:14-45
 @ ./src/app/app.jsx
 @ ./src/router.jsx

I think `babel-preset-state-0` may help. Include that in webpack presets. And you don't need presets in babelrc file if you have used them in webpack config. Try that and let me know if it helps — Shubham Khatri, Feb 05 '17 at 04:54

score 6 · Accepted Answer · answered Feb 05 '17 at 10:33

Checkout my babel packages and .babelrc is working in my current project and compare with yours:

.babelrc:

{
  "presets": ["react", "es2015" , "stage-0"],
  "plugins": [
    ["transform-decorators-legacy"]
  ]      
}

packages.json

"babel-core": "^6.4.5",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.3.13",

Thanks! Changing stage-2 to 0 did the trick. – Carl Feb 05 '17 at 22:18 — Carl, Feb 05 '17 at 22:18

Can't get arrow functions to work (React, Babel, Webpack, ES6)

1 Answers1