babel does not recognize jsx syntax... SyntaxError: Unexpected token (25:1) [duplicate]

Question

I am trying to build my react project using webpack and babel but I don't understand why it generates the below error. I have setup the .babelrc and webpack.config.js files as follows still don't understand what is wrong and why it doesn't recognize jsx.

Please let me know your valuable comments.

Thanks

[./src/index.js] 802 bytes {main} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (25:1)

  23 | 
  24 | ReactDOM.render(
> 25 |  <Provider store={store} >
     |  ^
  26 |      <App />
  27 |  </Provider>
  28 |   ,

 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js
ℹ ｢wdm｣: Failed to compile.

.babelrc

{
  "presets": ["env", "stage-0"]
}

webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + "public/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./public",
    port: 4000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
            presets: ['env','stage-0',]
        },
      },
      {
        test: /\.json$/,
        exclude: /(node_modules)/,
        loader: 'json-loader'
      }
    ]
  }
}

Directory structure

├── graph_generator
│   ├── arrows_candlesticks_graph_set2_v1.py
│   ├── data.json
│   ├── graph_generator.py
│   ├── json_reader.py
│   └── test.py
├── package.json
├── public
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── actions.js
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   ├── containers
│   │   │   ├── Graph.js
│   │   │   ├── MyPlot.js
│   │   │   └── Params.js
│   │   └── ui
│   │       ├── App.css
│   │       ├── Graph.js
│   │       ├── MyPlot.js
│   │       └── Params.js
│   ├── config.js
│   ├── constants.js
│   ├── data.json
│   ├── index.css
│   ├── index.js
│   ├── index.js.back
│   ├── initialState.js
│   ├── logo.svg
│   ├── registerServiceWorker.js
│   ├── store
│   │   ├── index.js
│   │   └── reducers.js
│   └── stylesheets
│       └── Params.js
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

Solution

EDIT

Problem solved after I installed

yarn add babel-preset-react --dev 

and then changed my preset as you can see below:

rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
        presets: ['env','stage-0',]
    },
  },

Answer 1

add this to the rules' array in webpack.config.js and see if the problem is solved:

        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }