React JS : Module Build Failuer, error showing in render colon - reactjs

Question

I am getting error like this
Module build failed: SyntaxError
It gives me error in colon of render function
Here it is my code :
webpack.config.js
module.exports = {
entry : './main.js',
output : {
path : './',
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query :{
presets : ['es2015', 'react']
}
}
]
}
package.json
{
"name": "library",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"react": "^15.0.2",
"react-dom": "^15.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.9.0",
"babel-loader": "^5.3.2"
}
main.js
import React from 'react';
import ReactDom from 'react-dom';
var Heading = React.createClass({
render : function() {
return <th>{this.props.heading}</th>;
}
});
var Headings = React.createClass({
render : function(){
var headings = this.props.headings.map(function(heading) {
return(<Heading heading = {name}/>);
});
return (<thead><tr>{headings}</tr><thead>);
}
});
var Row = React.createClass({
render : function() {
return (
<tr>
<td>{this.props.changeSet.when}</td>
<td>{this.props.changeSet.who}</td>
<td>{this.props.changeSet.description}</td>
</tr>
);
}
});
var Rows = React.createClass({
render : function() {
var rows = this.props.changeSets.map(function(changeSet) {
return(<Row changeSet = {changeSet} />);
});
return <tbody>{rows}</tbody>;
}
});
var App = React.createClass({
render : function() {
return (
<table className='table'>
<Headings headings={this.props.headings} />
<Rows changeSets={this.props.changeSets} />
</table>
);
}
});
/* Data Declaration */
var data = [
{
"when": "2 minutes ago",
"who": "Jill Dupre",
"description": "Created new account"
},
{
"when": "1 hour ago",
"who": "Lose White",
"description": "Added fist chapter"
},
{
"when": "2 hours ago",
"who": "Jordan Whash",
"description": "Created new account"
}
];
var headings = ['When','Who', 'Description'];
/* Call to Render Function for entire app */
ReactDom.render(<App headings={headings} changeSets={data} />, document.getElementById('container'));
Can somebody please provide a solution for it. I have included babel-core also but can't figure out what's wrong.

Answer 1

I tried setting up your code locally and was able to resolve the issue.
I was getting a Module build failed: ReferenceError: [BABEL] - path to file error
The reason is, The node API for babel has been moved to babel-core.So remove the babel dependency from both dependencies and devDependencies, move the babel-loader to your dependencies and clear the devDependencies of your package.json file and reinstall your modules. It should work
There are some syntax errors on
line 20 render : function(){
unclosed tags in line 15 return (<thead><tr>{headings}</tr><thead>);