title: Decorators are not supported in Babel 6.x + Webpack 2 + React
body: <p>I am using <strong>transform-decorators-legacy</strong> and I am still getting the error below. The project is based off of react-redux-universal-hot-example, but expanded upon. I believe the issue is either in .babelrc or my webpack config.</p>
  
  <p>I appreciate any help. Thank you in advance.</p>
  
  <p><strong>Error</strong>: "BabelLoaderError: SyntaxError: Decorators are not officially supported yet in 6.x pending a proposal update."</p>
  
  <pre><code>&gt; 12 | export default class ReportSubscriptionSelector extends Component {
  </code></pre>
  
  <p><strong>Package.json</strong>: (Removed some code that was unnessesary) Aware of some issues here.</p>
  
  <pre><code>{
  
    "dependencies": {
      "antd": "^2.6.3",
      "autobind-decorator": "^1.3.3",
      "autoprefixer": "^6.6.1",
      "autoprefixer-loader": "^3.1.0",
      "axios": "^0.7.0",
      "babel-core": "^6.5.2",
      "babel-loader": "^6.2.1",
      "babel-plugin-add-module-exports": "^0.1.2",
      "babel-plugin-transform-decorators-legacy": "^1.3.4",
      "babel-plugin-transform-react-display-name": "^6.3.13",
      "babel-plugin-transform-runtime": "^6.3.13",
      "babel-polyfill": "^6.3.14",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "babel-preset-stage-0": "^6.16.0",
      "babel-register": "^6.18.0",
      "babel-runtime": "^6.20.0",
      "body-parser": "^1.14.1",
      "bootstrap-loader": "^2.0.0-beta.19",
      "bootstrap-sass-loader": "^1.0.10",
      "classnames": "^2.2.3",
      "clean-webpack-plugin": "^0.1.15",
      "client-sessions": "^0.7.0",
      "compression": "^1.6.0",
      "concurrently": "^0.1.1",
      "eslint": "1.10.3",
      "eslint-config-airbnb": "0.1.0",
      "eslint-plugin-import": "^0.8.0",
      "eslint-plugin-react": "^3.5.0",
      "expose-loader": "^0.7.1",
      "express": "^4.13.3",
      "express-session": "^1.12.1",
      "extract-text-webpack-plugin": "^2.0.0-beta.5",
      "file-loader": "^0.8.5",
      "font-awesome": "^4.4.0",
      "font-awesome-webpack": "0.0.4",
      "history": "^2.0.1",
      "hoist-non-react-statics": "^1.0.3",
      "http-proxy": "^1.12.0",
      "immutable": "^3.7.6",
      "imports-loader": "^0.7.0",
      "invariant": "^2.2.0",
      "isomorphic-fetch": "^2.2.0",
      "jquery": "^3.1.1",
      "ladda": "^0.9.8",
      "less": "^2.5.3",
      "less-loader": "^2.2.1",
      "lodash.capitalize": "^3.0.0",
      "lodash.clone": "^4.0.1",
      "lodash.difference": "^4.0.1",
      "lodash.filter": "^3.1.1",
      "lodash.forown": "^3.0.2",
      "lodash.isequal": "^4.0.0",
      "lodash.merge": "^3.3.2",
      "lodash.omit": "^4.0.1",
      "lodash.partition": "^4.2.0",
      "lodash.pick": "^4.0.1",
      "lodash.pluck": "^3.1.2",
      "lodash.some": "^3.2.3",
      "lodash.union": "^3.1.0",
      "lru-memoize": "^1.0.0",
      "map-props": "^1.0.0",
      "material-ui": "^0.14.2",
      "moment": "^2.10",
      "multireducer": "^2.0.0",
      "node-sass": "^4.3.0",
      "normalizr": "^2.0.0",
      "piping": "^0.3.0",
      "pretty-error": "^1.2.0",
      "query-string": "^3.0.0",
      "re-notif": "^1.0.2",
      "react": "^0.14.8",
      "react-bootstrap": "^0.28.1",
      "react-bootstrap-table": "^3.0.0-beta.6",
      "react-datagrid": "^2.0.1",
      "react-date-range": "^0.9.0",
      "react-dnd": "^2.1.2",
      "react-dnd-html5-backend": "^2.1.2",
      "react-document-meta": "^2.0.0",
      "react-dom": "^0.14.8",
      "react-immutable-render-mixin": "^0.9.0",
      "react-inline-css": "^2.0.0",
      "react-ladda": "FoxxMD/react-ladda#2989787",
      "react-loader-advanced": "^0.7.0",
      "react-overlays": "^0.5.4",
      "react-redux": "^4.0.0",
      "react-router": "^2.0.0",
      "react-router-bootstrap": "^0.20.1",
      "react-router-redux": "^4.0.0",
      "react-select": "^1.0.0-beta8",
      "react-spinkit": "^1.1.4",
      "react-tap-event-plugin": "^0.2.1",
      "react-toastr": "2.8.0",
      "recompose": "^0.14.5",
      "redbox-react": "^1.1.1",
      "redux": "^3.0.4",
      "redux-async-connect": "^1.0.0-rc2",
      "redux-devtools": "^3.0.0-beta-3",
      "redux-devtools-dock-monitor": "^1.0.0-beta-3",
      "redux-devtools-log-monitor": "^1.0.0-beta-3",
      "redux-form": "^3.0.12",
      "redux-promise-middleware": "^2.3.1",
      "redux-router": "^1.0.0-beta7",
      "redux-storage": "^1.4.4",
      "redux-thunk": "^2.1.0",
      "reselect": "^2.2.1",
      "resolve-url-loader": "^1.4.3",
      "restler": "^3.4.0",
      "scroll-behavior": "^0.3.2",
      "serialize-javascript": "^1.1.2",
      "serve-favicon": "^2.3.0",
      "sifter": "^0.4.5",
      "sinon": "^1.17.2",
      "socket.io": "^1.3.7",
      "socket.io-client": "^1.3.7",
      "superagent": "^1.4.0",
      "timekeeper": "0.0.5",
      "url-loader": "^0.5.7",
      "validator": "^4.5.0",
      "warning": "^2.1.0",
      "webpack": "^2.2.0",
      "webpack-isomorphic-tools": "^2.6.6"
    },
    "devDependencies": {
      "autoprefixer-loader": "^3.1.0",
      "babel-cli": "^6.22.2",
      "babel-eslint": "^7.1.1",
      "babel-plugin-react-transform": "^2.0.0",
      "babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
      "babel-plugin-typecheck": "^3.6.0",
      "babel-preset-es2015": "^6.22.0",
      "better-npm-run": "^0.0.8",
      "bootstrap-loader": "^2.0.0-beta.19",
      "bootstrap-material-design": "^0.3.0",
      "bootstrap-sass": "^3.3.5",
      "chai": "^3.3.0",
      "clean-webpack-plugin": "^0.1.15",
      "concurrently": "^0.1.1",
      "css-loader": "^0.26.1",
      "eslint": "1.10.3",
      "eslint-config-airbnb": "0.1.0",
      "eslint-loader": "^1.0.0",
      "eslint-plugin-import": "^0.8.0",
      "eslint-plugin-react": "^3.5.0",
      "exports-loader": "^0.6.3",
      "font-awesome": "^4.4.0",
      "font-awesome-webpack": "0.0.4",
      "imports-loader": "^0.7.0",
      "isomorphic-fetch": "^2.2.0",
      "json-loader": "^0.5.4",
      "karma": "^0.13.10",
      "karma-cli": "^0.1.1",
      "karma-mocha": "^0.2.0",
      "karma-mocha-reporter": "^1.1.1",
      "karma-phantomjs-launcher": "^0.2.1",
      "karma-sourcemap-loader": "^0.3.5",
      "karma-webpack": "^1.7.0",
      "mocha": "^2.3.3",
      "node-sass": "^4.3.0",
      "phantomjs": "^1.9.18",
      "phantomjs-polyfill": "0.0.1",
      "postcss-loader": "^1.2.2",
      "react-a11y": "^0.2.6",
      "react-addons-test-utils": "^0.14.8",
      "react-transform-catch-errors": "^1.0.2",
      "react-transform-hmr": "^1.0.4",
      "redbox-react": "^1.1.1",
      "redux-async-connect": "^1.0.0-rc2",
      "redux-devtools": "^3.0.0-beta-3",
      "redux-devtools-dock-monitor": "^1.0.0-beta-3",
      "redux-devtools-log-monitor": "^1.0.0-beta-3",
      "resolve-url-loader": "^1.6.1",
      "sass-loader": "^4.1.1",
      "strip-loader": "^0.1.2",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack-dev-middleware": "^1.4.0",
      "webpack-hot-middleware": "^2.5.0"
    },
    "engines": {
      "node": "5.6.0"
    }
  }
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": [
      "react",
      "es2015",
      "stage-0"
    ],
    "plugins": [
      "transform-decorators-legacy",
      "transform-runtime",
      "add-module-exports",
      "transform-react-display-name"
    ],
    "env": {
      "development": {
        "plugins": [
          "typecheck",
          [
            "react-transform",
            {
              "transforms": [
                {
                  "transform": "react-transform-hmr",
                  "imports": ["react"],
                  "locals": ["module"]
                },
                {
                  "transform": "react-transform-catch-errors",
                  "imports": [
                    "react",
                    "redbox-react"
                  ]
                }
              ]
            }
          ]
        ]
      }
    }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>dev.config.js</strong>: (webpack.config for dev)</p>
  
  <pre><code>require('babel-polyfill');
  
  // Webpack config for development
  var fs = require('fs');
  var path = require('path');
  var webpack = require('webpack');
  var assetsPath = path.resolve(__dirname, '../static/dist');
  var host = (process.env.HOST || 'localhost');
  var port = parseInt(process.env.PORT) + 1 || 3001;
  var themePath = path.join(__dirname, '../src/theme');
  
  // https://github.com/halt-hammerzeit/webpack-isomorphic-tools
  var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
  var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
  
  var babelrc = fs.readFileSync('./.babelrc');
  var babelrcObject = {};
  
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  try {
    babelrcObject = JSON.parse(babelrc);
  } catch (err) {
    console.error('==&gt;     ERROR: Error parsing your .babelrc.');
    console.error(err);
  }
  
  var babelrcObjectDevelopment = babelrcObject.env &amp;&amp; babelrcObject.env.development || {};
  var babelLoaderQuery = Object.assign({}, babelrcObject, babelrcObjectDevelopment);
  delete babelLoaderQuery.env;
  
  babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
  for (var i = 0; i &lt; babelLoaderQuery.plugins.length; ++i) {
    var plugin = babelLoaderQuery.plugins[i];
    if (Array.isArray(plugin) &amp;&amp; plugin[0] === 'react-transform') {
      reactTransform = plugin;
    }
  }
  
  if (!reactTransform) {
    reactTransform = ['react-transform', { transforms: [] }];
    babelLoaderQuery.plugins.push(reactTransform);
  }
  
  if (!reactTransform[1] || !reactTransform[1].transforms) {
    reactTransform[1] = Object.assign({}, reactTransform[1], { transforms: [] });
  }
  
  // make sure react-transform-hmr is enabled
  reactTransform[1].transforms.push({
    transform: 'react-transform-hmr',
    imports: ['react'],
    locals: ['module']
  });
  
  module.exports = {
    devtool: 'source-map',
    context: path.resolve(__dirname, '..'),
    entry: {
      'main': [
        'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
        'font-awesome-webpack!./src/theme/font-awesome.config.js',
        `bootstrap-loader/lib/bootstrap.loader?extractStyles&amp;configFilePath=${themePath}/bs3.yml!bootstrap-loader/no-op.js`,
        './src/client.js'
      ]
    },
    output: {
      path: assetsPath,
      filename: '[name]-[hash].js',
      chunkFilename: '[name]-[chunkhash].js',
      publicPath: 'http://' + host + ':' + port + '/dist/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: JSON.stringify(babelLoaderQuery)
            },
            {
              loader: 'eslint-loader'
            }]
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader'
            }
          ]
        },
        {
          test: /\.less$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: '2',
                sourceMap: true,
                localIdentName: '[local]___[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader'
            },
            {
              loader: 'less-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true
              }
            }
          ]
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: '2',
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader'
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true,
              }
            }
          ]
        },
        {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: '10000',
                mimeType: 'application/font-woff'
              }
            }
          ]
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader'
            }
          ]
        },
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: '10000',
                mimeType: 'application/octet-stream'
              },
            }
          ]
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: '10000',
                mimeType: 'image/svg+xml'
              }
            }]
        },
        {
          test: webpackIsomorphicToolsPlugin.regular_expression('images'),
          use: [{
            loader: 'url-loader',
            options: {
              limit: '10240'
            }
          }]
        },
      ]
    },
    resolve: {
      modules: [
        'src',
        'node_modules'
      ],
      extensions: ['.json', '.js', 'jsx']
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        Tether: "tether",
        "window.Tether": "tether",
        Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
        Button: "exports-loader?Button!bootstrap/js/dist/button",
        Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
        Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
        Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
        Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
        Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
        Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
        Util: "exports-loader?Util!bootstrap/js/dist/util",
      }),
      // css files from the extract-text-plugin loader
      new ExtractTextPlugin({ filename: '[name]-[chunkhash].css', allChunks: true }),
      // hot reload
      new webpack.HotModuleReplacementPlugin(),
      new webpack.IgnorePlugin(/webpack-stats\.json$/),
      new webpack.DefinePlugin({
        __CLIENT__: true,
        __SERVER__: false,
        __DEVELOPMENT__: true,
        __DEVTOOLS__: true  // &lt;-------- DISABLE redux-devtools HERE
      }),
      webpackIsomorphicToolsPlugin.development()
    ]
  };
  </code></pre>