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

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