When using webpack to compile React it returns Unexpected token (

Question

The exact error message is

Module parse failed: /www/devreact/node_modules/jsx-loader/index.js!/www/devreact/app/dashboard.js Line 11: Unexpected token ( You may need an appropriate loader to handle this file type.

Webpack is failing on the following code below. '

var Add = React.createClass({
  render () {
    var sum = this.props.x + this.props.y;
    return React.DOM.span({}, sum);
  }
});

Here are the loaders being loaded in my webpack.config.js file.

  module:{
    loaders:[ /*Loaders like helprs Good for transcompiling ES6 */
      {test:/\.js$/,loader:'jsx-loader'} /*Test whenever you hit a javascript file use jsx-loader When using require module */
      ,{test:/\.json$/,loader:'json-loader'}
    ]
  },

Answer 1

render needs to be a function:

var Add = React.createClass({
  render: function () {
    var sum = this.props.x + this.props.y;
    return React.DOM.span({}, sum);
  }
});

Otherwise, you will have a syntax error defining the object literal inside the creatClass.