React - Module parse failed - parsing

Question

I've got this error all day when running webpack from command line:
ERROR in ./index.js
Module parse failed: /home/kuro/Workspace/ExpressJS/corate/src/index.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
| render:function(){
| return (
| <div>
| <div className="left">
| <img src={mac}/>
Here is my code in index.js
var React=require('react');
var ReactDOM=require('react-dom');
var style=require('../public/css/style.css');
var mac=require('../public/images/img_landing_page_mac.png');
var chrome=require('../public/images/btn_get_chrome.png');
var Content=React.createClass({
render:function(){
return (
<div>
<div className="left">
<img src={mac}/>
</div>
<div className="right">
<h2 style={font-size: '33px', letter-spacing: '5px'}>
Organize <br>Modern Knowledge<br> for Mankind
</h2>
<p style={font-size: '20px', margin-top: '35px', letter-spacing: '4px'}>
Consume, Colect and Revisit <br>Knowledge at Your Fingertips
</p>
<a href="#" style={margin-top: '80px', display: 'inline-block', margin-left: '-17px'}>
<img src={chrome}/>
</a>
</div>
</div>
);
}
});
ReactDOM.render(<Content/>,document.getElementByClassName('container'));
And configuration in webpack.config.js:
module.exports={
context: __dirname+'/src',
entry:'./index.js',
output:{
path:__dirname+'/static',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.png$/,
loader:'url?limit=10000'
},
{
test:/\.jpg$/,
loader:'url?limit=10000'
},
{
test:/\.css$/,
loader:'style!css'
}
]
}
}
I couldn't figure out what is wrong with it. Am I missing something here?

Answer 1

You need add babel-loader, with react preset, do the following steps
npm i --save-dev babel-loader babel-preset-react babel-preset-es2015
add to webpack.config.js configs for babel-loader ( to loaders: [..] section)
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
Update: babel-preset-es2015, babel-preset-react was deprecated in favor of using #babel/env and #babel/preset-react
npm i --save-dev babel-loader #babel/core #babel/preset-react #babel/preset-env
add to webpack.config.js configs for babel-loader
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
]

Answer 2

well mate . this worked
module: {
rules: [
// CSS loader here
{
test: /\.svg$/,
use: 'file-loader'
}
]
}
add this to your webpack config files
npm install --save-dev style-loader css-loader