title: babel does not recognize jsx syntax... SyntaxError: Unexpected token (25:1)
body: <p>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.</p>
  
  <p>Please let me know your valuable comments.</p>
  
  <p>Thanks</p>
  
  <pre><code>[./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(
  &gt; 25 |  &lt;Provider store={store} &gt;
       |  ^
    26 |      &lt;App /&gt;
    27 |  &lt;/Provider&gt;
    28 |   ,
  
   @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js
  ℹ ｢wdm｣: Failed to compile.
  </code></pre>
  
  <h1>.babelrc</h1>
  
  <pre><code>{
    "presets": ["env", "stage-0"]
  }
  </code></pre>
  
  <h1>webpack.config.js</h1>
  
  <pre><code>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'
        }
      ]
    }
  }
  </code></pre>
  
  <h1>Directory structure</h1>
  
  <pre><code>├── 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
  </code></pre>
  
  <p><strong><em>Solution</em></strong></p>
  
  <h1>EDIT</h1>
  
  <p>Problem solved after I installed </p>
  
  <pre><code>yarn add babel-preset-react --dev 
  </code></pre>
  
  <p>and then changed my preset as you can see below:</p>
  
  <pre><code>rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader',
      query: {
          presets: ['env','stage-0',]
      },
    },
  </code></pre>