title: JSX Unexpected token - Webpack and babel-loader
body: <p>I'm getting JSX parse error after upgrading <strong>webpack</strong> from <code>^1.14.0</code> to <code>"^3.0.0"</code></p>
  
  <pre><code>ERROR in ./shared/Application.js
  Module parse failed: /Users/arjunkumar/Documents/Work/test/web/shared/Application.js Unexpected token (25:2)
  You may need an appropriate loader to handle this file type.
  </code></pre>
  
  <p>The related code in <code>Application.js</code> looks like this</p>
  
  <pre><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router routes={Routes(store)} history={history} /&gt;
    &lt;/Provider&gt;,
    document.getElementById('app-shell') 
  );
  </code></pre>
  
  <p>Relevant part of <code>webpack.config.js</code> file looks as follows <em>(all the required plugins are imported properly to webpack config file, not present in the following code)</em>.</p>
  
  <pre><code>module.exports = {
    entry: {
      app:['./shared/Application.js'],
      vendors:[// vendors like react and other libs ]
    },
    output: {
      path: __dirname + '/public/build',
      filename: 'app.[chunkhash].js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              'css-loader',
              'autoprefixer-loader',
              'sass-loader'
            ],
            exclude: /node_modules/
          }),
        },
        {
          test: /\.js$/,
          exclude: [/node_modules/],
          use:[{
            loader: 'babel-loader',
            options: {
              presets: [
                ['es2015', {modules: false}],
                'react'
              ],
              babelrc: false
            }
          }]
        },
        {
          test: /\.jsx$/,
          exclude: [/node_modules/],
          use:[{
            loader: 'babel-loader',
            options: {
              presets: [
                'es2015',
                'react'
              ],
              babelrc: false
            }
          }]
        },
      ]
    },
    devtool: ( process.env.NODE_ENV === 'production' ) ? false : 'eval',
    plugins: [
      new ExtractTextPlugin(
        'app.[chunkhash].css',
        {
          allChunks: true
        }
      ),
      new webpack.optimize.CommonsChunkPlugin({
        names: ['utilities','vendors'],
        filename: '[name].[chunkhash].js',
        minChunks: Infinity
      }),
      new webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false
        },
        output: {
          comments:false
        },
        comments: false
      }),
      new AssetsPlugin({
        filename: 'assets.json',
        fullPath: false,
        path: __dirname + '/public/build',
        prettyPrint: true
      })
    ]
  
  };
  </code></pre>
  
  <p>Relevant dependencies for the issue from <code>package.json</code> file is as follows.</p>
  
  <pre><code>{
    "devDependencies": {
      "babel": "^6.23.0",
      "babel-core": "^6.25.0",
      "babel-loader": "^7.1.1",
      "babel-plugin-transform-object-assign": "^6.8.0",
      "babel-plugin-transform-react-constant-elements": "^6.9.1",
      "babel-plugin-transform-react-inline-elements": "^6.8.0",
      "babel-plugin-transform-react-remove-prop-types": "^0.2.9",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-es2015-loose": "^8.0.0",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "babel-register": "^6.24.1",
      "extract-text-webpack-plugin": "^2.1.2",
      "html-webpack-plugin": "^2.21.0",
      "husky": "^0.13.1",
      "lodash-webpack-plugin": "^0.10.6",
      "node-sass": "^3.13.1",
      "postcss-loader": "^2.0.6",
      "purifycss-webpack": "^0.4.2",
      "sass-loader": "^4.1.1",
      "webpack": "^3.0.0",
      "webpack-bundle-analyzer": "^2.3.0",
      "webpack-dev-server": "^2.5.0"
    },
    "dependencies": {
      "react": "^15.1.0"
    }
  }
  </code></pre>
  
  <p>Just in case anyone wants to check <code>.babelrc</code> file <em>( I think <code>babel-loader</code> respects <code>babelrc: false</code> flag in <code>webpack.config.js</code>)</em>.</p>
  
  <pre><code>{
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "env": {
      "production": {
        "plugins": [
          "transform-react-constant-elements",
          "transform-react-inline-elements",
          "transform-react-remove-prop-types"
        ]
      }
    },
    "comments": false,
    "compact": false
  }
  </code></pre>
  
  <p>Any thoughts or leads on what might be wrong?</p>
  
  <p><strong>Another important thing I noticed is even though my webpack project and global dependency is at <code>3.0.0</code>, when I run the webpack in the project it shows <code>Version: webpack 1.15.0</code> at the top. Screenshot below.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hY0fa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hY0fa.png" alt="webpack wrong version"></a></p>