babel jsx SyntaxError: Unexpected token - reactjs

Question

I'm a learner of react and run into a bug that I don't know how to solve.
I first write the code on codepen, and it runs without problem. Here is the link to my codepen. After exporting it to the local machine, I setup the webpack to handle the compilation. And I receive the error of unexpected token.
After reading all the answers with this title, I still can't solve my bug.
I've updated my webpack cofig file according to the answers, re-installed the dependencies, used a couple of other react boilerplates(1, I currently use this one, but I've also tried some other react starter templates). After I remove the code that the console indicates, I've got another bug pointing to other place in the code.
Thanks in advance.
And here are my codes.
part of the webpack.config.js:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
.babelrc:
{
"presets": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
CommentList.js:
import React, { Component, PropTypes } from 'react'
import Comment from './Comment'
class CommentList extends Component {
render() {
const CommentNodes = this.props.data.map((comment)=>{
return (
<Comment author={comment.author} key={comment.id}>{comment.txt}<Comment/>
)
})
return (
<div className="commentList">
<h2>Comments:</h2>
{CommentNodes}
</div>
)
}
}
CommentList.propTypes = {
data: PropTypes.array.isRequired
}
export default CommentList
the error:
/Users/liulian/Documents/React-flux/react-boilerplate/src/components/commentBox/CommentList.js
22:9 error Parsing error: Unexpected token
Module build failed: SyntaxError: /Users/liulian/Documents/React-flux/react-boilerplate/src/components/commentBox/CommentList.js: Unexpected token (22:8)
Points to lines of code below, beginning from line 21 to line 25:
CommentList.propTypes = {
data: PropTypes.array.isRequired
}
export default CommentList