React server run error + Redux + Webpack + Babel [TODO LIST] - reactjs

Question

I am new in React and doing a Todo List but i can't start my server because i am getting error when I try yarn run build
Error
ERROR in ./src/index.js
Module parse failed: C:\Users\PixyDigital\Desktop\Getto\src\index.js Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
|
| render(
| <Provider store={store}>
| <App />
| </Provider>,
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile.
index.js
import React from "react"
import {render} from "react-dom"
import {Provider} from "react-redux"
import store from "./stores/store"
import App from "./components/app.js"
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("app")
)
webpack.config.js
module.exports = {
entry: __dirname + "/src/index.js",
output:{
filename: "bundle.js",
path: __dirname + "/dist"
},
module:{
loaders:[
{
test:/\.css$/,
loader:"style-loader$css-loader"
},
{
test:/\.jsx$/,
loader:"babel-loader",
exclude:/node_modules/
}
]
},
resolve:{
extensions:['*','.js','.jsx','.css']
},
devServer:{
contentBase: __dirname + "/dist"
}
}
package.json
{
"name": "todoApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"license": "MIT",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server --inline --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
}
}
So how can I resolve my problem, Do you have any idea?
Thanks.

Answer 1

{
test:/\.jsx?$/,
loader:"babel-loader",
exclude:/node_modules/,
options: {
presets: ["react"]
}
}
UPD: This happens because babel doesn't transform JSX out of the box;
Also i'd recommend to configure babel using .baberlc file