REact.js, react-toolbox syntax error?

Question

Why am I getting this syntax error??? Driving me nuts, I know its some simple...I basically copied the example code from here:

http://react-toolbox.com/#/components/input

And I am simply trying to import it into here:

Any suggestions are hugely appreciated...

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: __dirname,
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './app/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'react-toolbox.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
           presets:['es2015','react']
        }
      }, {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
      }
    ]
  },
  toolbox: {
    theme: path.join(__dirname, 'app/toolbox-theme.scss')
  },
  postcss: [autoprefixer],
  plugins: [
    new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

package.json:

{
  "name": "react-toolbox-example",
  "version": "0.11.4",
  "description": "A set of complementary tools to ReactJS.",
  "author": "React Toolbox Team (http://github.com/react-toolbox)",
  "contributors": [
    {
      "name": "Javi Jimenez Villar",
      "url": "http://soyjavi.com/",
      "email": "[email protected]"
    },
    {
      "name": "Javi Velasco Arjona",
      "url": "http://javivelasco.com/",
      "email": "[email protected]"
    }
  ],
  "bugs": {
    "url": "https://github.com/react-toolbox/react-toolbox/issues",
    "email": "[email protected]"
  },
  "keywords": [
    "react",
    "react-component",
    "material design",
    "toolbox",
    "components"
  ],
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "6.3.6",
    "babel-core": "6.7.7",
    "babel-eslint": "6.0.3",
    "babel-loader": "^6.0.1",
    "babel-plugin-react-transform": "2.0.2",
    "babel-preset-es2015": "^6.1.4",
    "babel-preset-react": "^6.1.4",
    "classnames": "^2.2.1",
    "cross-env": "^1.0.1",
    "css-loader": "0.23.1",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "1.0.1",
    "node-sass": "3.4.2",
    "normalize.css": "^4.0.0",
    "postcss-loader": "0.8.2",
    "react": "^15.0.0",
    "react-addons-css-transition-group": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-toolbox": "^0.16.2",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "1.2.3",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1",
    "toolbox-loader": "0.0.3",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "scripts": {
    "start": "node ./server",
    "build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config",
    "deploy": "gh-pages -d build"
  },
  "repository": "github:react-toolbox/react-toolbox-example"
}

.babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

https://github.com/malexanders/react-toolbox-example

Answer 1

Your code is crashing on the class property syntax which is currently a stage 1 Ecmascript proposal. In order for babel to transpile this correctly you need the stage-1 preset. I would say it's pretty common to have the stage-0 preset which includes everything above it as well.

You can even see from your repo's .babelrc file already wanting to include stage-0 preset:

{
  "plugins": ["es2015", "stage-0"]
}

However it looks like you're overriding this file in your webpack config using the query key here:

query: {
  presets:['es2015', 'react']
}

So what you need to do to fix this is

1) Install stage-0 preset

npm install --save-dev babel-preset-stage-0

2) Add the preset to your webpack.config.js query: presets array

query: {
  presets: ['es2015', 'react', 'stage-0']
}