title: Webpack - Babel - Parsing JSX: SyntaxError: Unexpected token
body: <p>I am trying to create a React application using webpack. I am using babel to transpile .jsx files. But it seems, it is not using babel loader to load .jsx file. I am receiving following error:</p>
  
  <pre><code>ERROR in ./app.jsx
  Module parse failed: C:\codebase\react-demo/app\app.jsx Unexpected token (7:15)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token (7:15)
      at Parser.pp$4.raise (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2221:15)
      at Parser.pp.unexpected (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:603:10)
      at Parser.pp$3.parseExprAtom (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1822:12)
      at Parser.pp$3.parseExprSubscripts (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1715:21)
      at Parser.pp$3.parseMaybeUnary (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1692:19)
      at Parser.pp$3.parseExprOps (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1637:21)
      at Parser.pp$3.parseMaybeConditional (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1620:21)
      at Parser.pp$3.parseMaybeAssign (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1597:21)
      at Parser.pp$3.parseExpression (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1573:21)
      at Parser.pp$1.parseReturnStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:839:33)
      at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:699:34)
      at Parser.pp$1.parseBlock (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:981:25)
      at Parser.pp$3.parseFunctionBody (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2105:24)
      at Parser.pp$3.parseMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2075:10)
      at Parser.pp$1.parseClassMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1137:25)
      at Parser.pp$1.parseClass (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1118:14)
      at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:697:19)
      at Parser.pp$1.parseTopLevel (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:638:25)
      at Parser.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:516:17)
      at Object.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:3098:39)
      at Parser.parse (C:\codebase\react-demo\node_modules\webpack\lib\Parser.js:902:15)
      at DependenciesBlock.&lt;anonymous&gt; (C:\codebase\react-demo\node_modules\webpack\lib\NormalModule.js:104:16)
      at DependenciesBlock.onModuleBuild (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
      at nextLoader (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
      at C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
      at Storage.finished (C:\codebase\react-demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
      at C:\codebase\react-demo\node_modules\graceful-fs\graceful-fs.js:78:16
      at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
  </code></pre>
  
  <p>My <code>webpack.config.js</code> looks like:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  var __dirname = path.resolve();
  
  module.exports = {
      context: __dirname + "/app",
      entry: "./app.jsx",
      output: {
          path: __dirname + "/dist/",
          filename: "bundle.min.js"
      },
      loaders: [{
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
      }],
      plugins: [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
          new HtmlWebpackPlugin({
              template: 'index.html'
          })
      ],
  };
  </code></pre>
  
  <p>My app.jsx (located in ./app/app/jsx) is:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class App extends React.Component {
  
      render() {
          return &lt;div &gt; Test &lt; /div&gt;;
      }
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>I have following <code>.babelrc</code>:</p>
  
  <pre><code>{
      "presets": ["es2015", "stage-0", "react"]
  }
  </code></pre>
  
  <p>I have following node dependencies installed:</p>
  
  <pre><code>"devDependencies": {
      "babel-core": "^6.13.2",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.13.2",
      "babel-preset-react": "^6.11.1",
      "babel-preset-stage-0": "^6.5.0",
      "html-webpack-plugin": "^2.22.0",
      "react": "^15.3.0",
      "react-dom": "^15.3.0",
      "webpack": "^1.13.1",
      "webpack-dev-server": "^1.14.1"
  }
  </code></pre>
  
  <p>Any idea what could I be missing?</p>