I’m having a strange error whenever I run with webpack and babel with my Atom editor.
The error revolves around renderTable()
method.
So building with webpack:
constructor() {
super();
this.state = {
topAllTime: [],
top30Days: []
}
this.renderTable = this.renderTable.bind(this);
}
renderTable() {
return (this.state.topAllTime.map((user, i) => {
return (<tbody className='user-row'>
<tr className='camper' key={user.id}>
<th className='key'>{user.id}</th>
<th className='username'><img src={user.img} style={styles.image}/> {user.username}</th>
<th className='recent'>{user.recentPoints}</th>
<th className='all-time'>{user.allTimePoints}</th>
</tr>
</tbody>)
})
);
}
I get this error
If I want to bind with ES6 method like so:
renderTable = ()=>{
return ( this.state.topAllTime.map((user, i) => {
return (<tbody className='user-row'>
<tr className='camper' key={user.id}>
<th className='key'>{user.id}</th>
<th className='username'><img src={user.img} style={styles.image}/> {user.username}</th>
<th className='recent'>{user.recentPoints}</th>
<th className='all-time'>{user.allTimePoints}</th>
</tr>
</tbody>)
})
)
}
I get unexpected token, when I’m sure this is correct.
And it did on https://codesandbox.io/s/7y3y1rppjq, works well and shows no errors.
I’m guessing it might be my webpack being weird, but everything looks right.
module.exports = {
entry: "./app/App.js",
output: {
filename: "public/bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: /app/,
loader: "babel",
query: {
presets: ["react", "es2015"]
}
}
]
},
devtool: "eval-source-map"
};