title: babel-loader jsx SyntaxError: Unexpected token
body: <p>I'm a beginner in React + Webpack.</p>
  
  <p>I found a weird error in my hello world web app.</p>
  
  <p>I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax.</p>
  
  <p>Here are my dependencies:</p>
  
  <pre><code>"devDependencies": {
    "babel-core": "^6.0.14",
    "babel-loader": "^6.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "react": "^0.14.1"
  }
  </code></pre>
  
  <p>Here is my <code>webpack.config.js</code></p>
  
  <pre><code>var path = require('path');
  module.exports = {
    entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    }
  };
  </code></pre>
  
  <p>Here is my <code>app/main.js</code></p>
  
  <pre><code>var React = require("react");
  React.render(&lt;h1&gt;hello world&lt;/h1&gt;,document.getElementById("app"));
  </code></pre>
  
  <p>And this is the error message</p>
  
  <pre><code>ERROR in ./app/main.js
  Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
    1 | var React = require("react");
  &gt; 2 | React.render(&lt;h1&gt;hello world&lt;/h1&gt;,document.getElementById("app"));
      |              ^
  at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)
  </code></pre>
  
  <p>Thanks for you guys.</p>