<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/leoasis/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/leoasis">@leoasis</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.5.1</li>
<li><strong>Node version:</strong> 4.2.0</li>
<li><strong>npm version:</strong> 3.7.2</li>
</ul>
<h3 dir="auto">Options</h3>
<p dir="auto">babelrc:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;babel-preset-es2015&quot;,
    &quot;babel-preset-stage-0&quot;,
    &quot;babel-preset-react&quot;
  ],
  &quot;plugins&quot;: [
    &quot;babel-plugin-transform-react-constant-elements&quot;
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "babel-preset-es2015",
    "babel-preset-stage-0",
    "babel-preset-react"
  ],
  "plugins": [
    "babel-plugin-transform-react-constant-elements"
  ]
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;Static /&gt;
      &lt;/div&gt;
    );
  }
}

class Static extends Component {
  render() {
    return (
      &lt;div&gt;static&lt;/div&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;Static /&gt;
      &lt;/div&gt;
    );
  }
}

class Static extends Component {
  render() {
    return (
      &lt;div&gt;static&lt;/div&gt;
    );
  }
}
</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">When running babel with the input code with the <code class="notranslate">babel-plugin-transform-react-constant-elements</code>, the hoisted element is incorrectly placed before the component is actually declared, see output and check where <code class="notranslate">Static</code> is declared and where the element is hoisted:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="'use strict';

Object.defineProperty(exports, &quot;__esModule&quot;, {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (&quot;value&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(&quot;Cannot call a class as a function&quot;); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(&quot;this hasn't been initialised - super() hasn't been called&quot;); } return call &amp;&amp; (typeof call === &quot;object&quot; || typeof call === &quot;function&quot;) ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== &quot;function&quot; &amp;&amp; superClass !== null) { throw new TypeError(&quot;Super expression must either be null or a function, not &quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _ref = _react2.default.createElement(Static, null);

var Test = function (_Component) {
  _inherits(Test, _Component);

  function Test() {
    _classCallCheck(this, Test);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Test).apply(this, arguments));
  }

  _createClass(Test, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        _ref
      );
    }
  }]);

  return Test;
}(_react.Component);

exports.default = Test;

var Static = function (_Component2) {
  _inherits(Static, _Component2);

  function Static() {
    _classCallCheck(this, Static);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Static).apply(this, arguments));
  }

  _createClass(Static, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        'static'
      );
    }
  }]);

  return Static;
}(_react.Component);"><pre class="notranslate"><code class="notranslate">'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call &amp;&amp; (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" &amp;&amp; superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _ref = _react2.default.createElement(Static, null);

var Test = function (_Component) {
  _inherits(Test, _Component);

  function Test() {
    _classCallCheck(this, Test);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Test).apply(this, arguments));
  }

  _createClass(Test, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        _ref
      );
    }
  }]);

  return Test;
}(_react.Component);

exports.default = Test;

var Static = function (_Component2) {
  _inherits(Static, _Component2);

  function Static() {
    _classCallCheck(this, Static);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Static).apply(this, arguments));
  }

  _createClass(Static, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        'static'
      );
    }
  }]);

  return Static;
}(_react.Component);
</code></pre></div>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jesenko/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jesenko">@jesenko</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.3.13</li>
<li><strong>Node version:</strong> v4.1.2</li>
<li><strong>npm version:</strong> 3.3.8</li>
</ul>
<h3 dir="auto">Options</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;react&quot;,
    &quot;es2015&quot;,
    &quot;stage-2&quot;
  ],
  &quot;plugins&quot;: [
    &quot;transform-react-constant-elements&quot;
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "react",
    "es2015",
    "stage-2"
  ],
  "plugins": [
    "transform-react-constant-elements"
  ]
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
  const Component = () =&gt; (&lt;PrivateComponent /&gt;);

  export default Component;
  const PrivateComponent = () =&gt; (&lt;div /&gt;);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-v">Component</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">PrivateComponent</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Component</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-v">PrivateComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">Ordering of constantized elements is such that <code class="notranslate">PrivateComponent</code> is not yet defined when referenced by <code class="notranslate">Component</code>, e.g.:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  // ...  
  // PrivateComponent not yet defined!!!
  var _ref = _react2.default.createElement(PrivateComponent, null);
  // ...
  var PrivateComponent = function PrivateComponent() {
    return _ref2;
  };"><pre class="notranslate">  <span class="pl-c">// ...  </span>
  <span class="pl-c">// PrivateComponent not yet defined!!!</span>
  <span class="pl-k">var</span> <span class="pl-s1">_ref</span> <span class="pl-c1">=</span> <span class="pl-s1">_react2</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-v">PrivateComponent</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-c">// ...</span>
  <span class="pl-k">var</span> <span class="pl-v">PrivateComponent</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-v">PrivateComponent</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">_ref2</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I guess that moving <em>all</em> constantized elements (i.e. <code class="notranslate">var _ref</code>, <code class="notranslate">var _ref2</code>...) AFTER all component definitions might already fix the issue</p>