REact.js, react-toolbox syntax error? - reactjs

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": "javi.jimenez.villar#gmail.com"
},
{
"name": "Javi Velasco Arjona",
"url": "http://javivelasco.com/",
"email": "javier.velasco86#gmail.com"
}
],
"bugs": {
"url": "https://github.com/react-toolbox/react-toolbox/issues",
"email": "issues#react-toolbox.com"
},
"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']
}

Answer 2

The equals should be a colon. Additionally, there needs to be a comma after the last curly brace.