title: How to set up Babel 6 stage 0 with React and Webpack
body: <h2>My understanding from the docs</h2>
  
  <p>I see that Babel 6 has three presets for now: es2015, react and stage-x.
  I read that I can set those in <code>.babelrc</code> like so:</p>
  
  <pre><code>{
    "presets": ["es2015", "react", "stage-0"]
  }
  </code></pre>
  
  <p>or directly in package.JSON like so:</p>
  
  <pre><code>{
    ...,
    "version": x.x.x,
    "babel": {
      "presets": ["es2015", "react", "stage-0"]
    },
    ...,
  }
  </code></pre>
  
  <p>I can further use babel-loader with webpack like this:</p>
  
  <pre><code>loader: 'babel?presets[]=es2015'
  </code></pre>
  
  <p><br></p>
  
  <h2>My problem</h2>
  
  <p>So to compile everything nice and clean I'm adding <code>babel-loader</code>, which has just been updated to work with Babel6, to the webpack config like this:</p>
  
  <pre><code>module.exports = function(options) {
    var jsLoaders = ['babel?presets[]=es2015'];
    [...]
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: jsLoaders
        },
        {
          test: /\.jsx$/,
          exclude: /node_modules/,
          loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
        },
        [...]
  </code></pre>
  
  <p><br>
  Now when I compile <strong>without</strong> <code>.babelrc</code> in root or presets options set in <code>package.JSON</code>, i.e. only with the babel-loader es2015 preset set in the webpack config I get an unexpected token error about static propTypes in my React component class:</p>
  
  <pre><code>ERROR in ./app/components/form/index.jsx
  Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
    17 | // ES6 React Component:
    18 | export default class SurveyForm extends Component {
  &gt; 19 |   static propTypes = {
       |                    ^
  </code></pre>
  
  <p>On GitHub I got told this is a <code>stage-1</code> feature, namely <code>transform-class-properties</code>. So I would like to implement <code>stage-0</code> right away.
  <br><strong>BUT</strong><br>
  When I do so by adding <code>.babelrc</code> or defining <code>package.JSON</code> like above I get a very weird build fail error:</p>
  
  <pre><code>ERROR in ./app/components/form/index.jsx
  Module build failed: Error: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
      at NodePath.insertAfter (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13)
      at NodePath.replaceWithMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/replacement.js:92:8)
      at handleClassWithSuper (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:80:10)
      at PluginPass.Class (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:101:11)
      at newFn (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27)
      at NodePath._call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18)
      at NodePath.call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:44:17)
      at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:102:12)
      at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
      at TraversalContext.visitSingle (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19)
      at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19)
      at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
      at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:106:22)
      at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
      at TraversalContext.visitMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:106:17)
      at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19)
      at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
   @ ./app/index.jsx 9:0-28
  </code></pre>
  
  <p>Or in short: <code>Module build failed: Error: /.../index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?</code></p>
  
  <p><strong>This is where I'm stuck.</strong> I wrote this component with Babel5 when I was able to compile with babel-loader like this and everything worked fine:</p>
  
  <pre><code>loader: 'babel?optional[]=runtime&amp;stage=0
  </code></pre>
  
  <p>Now I'm getting the mentioned errors compiling.</p>
  
  <ul>
  <li>Is this a <code>babel-loader</code> issue, or a <code>babel</code> issue?</li>
  <li>Where do I have to configure <code>stage-0</code> so that it won't
  throw errors?</li>
  </ul>
  
  <p><br></p>
  
  <h2>Update</h2>
  
  <p>When compiling with presets set and using the mentioned workaround for the class export bug (must not export class until after creating it) the order of the set presets changes the error message. When I set <code>stage-0</code> first the error now is <code>'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)</code>
  When I put <code>stage-0</code> second or third I get the message about syntax error from above.</p>
  
  <p><br></p>
  
  <h2>Latest</h2>
  
  <p>For the latest advances regarding these bugs <a href="https://stackoverflow.com/a/33620949/1147595">see my post</a> or <a href="https://phabricator.babeljs.io/" rel="noreferrer">the new babel issue tracker on phabricator</a> for more. <em>(Basically compiling is fixed as of 6.2.1 but there's other things happening now)</em></p>
  
  <p><strong>All the bugs mentioned in this article are completely fixed as of Babel 6.3.x. Please update your dependencies if you're still having issues.</strong></p>