title: BabelLoaderError: SyntaxError: Missing class properties transform
body: <p>Getting the following message when I try to run my dev-server:</p>
  
  <p><code>BabelLoaderError: SyntaxError: Missing class properties transform.</code></p>
  
  <p>I've installed the class-properties babel plugin as you can see, and I have incorporated it into my .babelrc file:</p>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{ "presets": ["es2015", "stage-2"],
    "plugins": ["transform-class-properties"]
  }
  </code></pre>
  
  <p>But still won't render. If I remove this ES6 arrow function - <code>add = (a, b) =&gt; a + b</code> - it renders perfectly, but the class-properties plugin doesn't seem to be fixing it...</p>
  
  <p>Would appreciate if anyone can spot what's going wrong.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "judo-heroes",
    "version": "1.0.0",
    "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
    "main": "src/server.js",
    "repository": "git@github.com:lmammino/judo-heroes.git",
    "scripts": {
      "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
      "start-dev": "npm run start-dev-hmr",
      "start-dev-single-page": "node_modules/.bin/http-server src/static",
      "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
      "build": "NODE_ENV=production node_modules/.bin/webpack -p"
    },
    "author": "Luciano Mammino",
    "license": "MIT",
    "dependencies": {
      "babel-cli": "^6.11.4",
      "babel-core": "^6.13.2",
      "babel-loader": "^6.2.5",
      "babel-plugin-react-html-attrs": "^2.0.0",
      "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
      "babel-preset-es2015": "^6.13.2",
      "babel-preset-react": "^6.11.1",
      "babel-preset-react-hmre": "^1.1.1",
      "ejs": "^2.5.1",
      "express": "^4.14.0",
      "react": "^15.3.1",
      "react-dom": "^15.3.1",
      "react-redux": "^4.4.5",
      "react-router": "^2.6.1",
      "redux": "^3.6.0"
    },
    "devDependencies": {
      "babel-plugin-transform-class-properties": "^6.18.0",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-stage-2": "^6.18.0",
      "http-server": "^0.9.0",
      "react-hot-loader": "^1.3.0",
      "webpack": "^1.13.2",
      "webpack-dev-server": "^1.14.1"
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>"use strict";
  
  const debug = process.env.NODE_ENV !== "production";
  
  const webpack = require('webpack');
  const path = require('path');
  
  module.exports = {
    devtool: debug ? 'inline-sourcemap' : null,
    entry: path.join(__dirname, 'src', 'app-client.js'),
    devServer: {
      inline: true,
      port: 3333,
      contentBase: "src/static/",
      historyApiFallback: {
        index: '/index-static.html'
      }
    },
    output: {
      path: path.join(__dirname, 'src', 'static', 'js'),
      publicPath: "/js/",
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: path.join(__dirname, 'src'),
        loader: ['babel-loader'],
        query: {
          cacheDirectory: 'babel_cache',
          presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
        }
      }]
    },
    plugins: debug ? [] : [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        mangle: true,
        sourcemap: false,
        beautify: false,
        dead_code: true
      }),
    ]
  };
  </code></pre>