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": "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

How are you building? Webpack? Do you have the stage-0 preset in your .babelrc? — azium, May 26 '16 at 18:52
Using webpack - not sure about .babelrc. How to I access that file? Totally new to React, so please bare with me! — malexanders, May 26 '16 at 19:01
`.babelrc` is file you include yourself.. it tells babel which presets you're using. You're probably missing one or two of those things. Paste the following into your question: `.babelrc` file, `webpack.config.js` file and your `package.json` file. --- Basically what your problem boils down to is that the syntax it's erroring on requires a `stage-1` javascript proposal called class properties.. without that preset your code will crash https://github.com/jeffmo/es-class-fields-and-static-properties — azium, May 26 '16 at 19:07
Thanks so much, I included a link to the github repo - figured that may be a little easier — malexanders, May 26 '16 at 19:13

score 1 · Accepted Answer · answered May 26 '16 at 19:28

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']
}

wow, thanks so much. I'm increasingly more grateful for the SO community! Before moving on - can you suggest some good resources for learning/study? — malexanders, May 26 '16 at 19:34
@matthewalexander From Toronto too, eh? join our slack and we can help you further. http://slack.torontojs.com/ — azium, May 26 '16 at 20:29

score -1 · Answer 2 · answered May 26 '16 at 19:27

-1

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

answered May 26 '16 at 19:27

Christoph

978
7
17

You're thinking of a JavaScript object, not a `class` – azium May 26 '16 at 19:28
Down vote? Really? It looks like an object. And all of the React classes I've ever written are written as: MyClass = React.createClass({ propTypes: { }, method1: function () { }, render: function () { } }); – Christoph May 26 '16 at 19:31
Yep, I agree a downvote is harsh here. There is nothing to explicitly state that that excerpt of code is in fact a part of a `class`. – ctrlplusb May 26 '16 at 19:36
It's completely clear, to me, at least that this is inside `class`. I typically downvote answers that are wrong, expecting the poster to delete it, or update their answer to be correct. It's not a popularity contest, it's all about correctness. – azium May 26 '16 at 19:42

REact.js, react-toolbox syntax error?

2 Answers2