<p dir="auto">Given the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import foo from 'foo';
export { default as bar } from 'bar';"><pre class="notranslate"><code class="notranslate">import foo from 'foo';
export { default as bar } from 'bar';
</code></pre></div>
<p dir="auto">I would have expected <code class="notranslate">foo</code> to be loaded and evaluated <em>before</em> <code class="notranslate">bar</code>, but Babel transpiles this to (somewhat simplified):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="exports.bar = undefined;

var _bar = require('bar');

Object.defineProperty(exports, 'bar', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_bar).default;
  }
});

require('foo');"><pre class="notranslate"><code class="notranslate">exports.bar = undefined;

var _bar = require('bar');

Object.defineProperty(exports, 'bar', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_bar).default;
  }
});

require('foo');
</code></pre></div>
<p dir="auto">Note that <code class="notranslate">foo</code> is required <em>after</em> <code class="notranslate">bar</code>.</p>
<p dir="auto">The workaround is pretty simple:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import foo from 'foo';
import bar from 'bar';

export { bar }"><pre class="notranslate"><code class="notranslate">import foo from 'foo';
import bar from 'bar';

export { bar }
</code></pre></div>
<p dir="auto">But surprising nonetheless.</p>
<p dir="auto">I posted this on the <a href="https://discuss.babeljs.io/t/re-exports-hoisted-above-imports/773" rel="nofollow">discourse forums</a> before filing here.</p>
<p dir="auto">Here's the issue <a href="http://babeljs.io/repl/#?babili=false&amp;evaluate=true&amp;lineWrap=false&amp;presets=latest%2Creact%2Cstage-2&amp;code=import%20foo%20from%20'foo'%3B%0Aexport%20%7B%20default%20as%20bar%20%7D%20from%20'bar'%3B&amp;experimental=false&amp;loose=false&amp;spec=false&amp;playground=true" rel="nofollow">reproduced on the Babel site</a>.</p>
<h3 dir="auto">Input Code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import foo from 'foo';
export { default as bar } from 'bar';"><pre class="notranslate"><code class="notranslate">import foo from 'foo';
export { default as bar } from 'bar';
</code></pre></div>
<h3 dir="auto">Babel Configuration</h3>
<p dir="auto"><code class="notranslate">babel-latest</code></p>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">The <code class="notranslate">'foo'</code> module should be loaded and evaluated first.</p>
<h3 dir="auto">Current Behavior</h3>
<p dir="auto">The re-exported <code class="notranslate">bar</code> is loaded and evaluated before <code class="notranslate">'foo'</code>, despite the reverse source order.</p>
<h3 dir="auto">Context</h3>
<p dir="auto">Trying to import babel-polyfill in an "index" type of file (i.e. a file that is entirely re-exports of other files).</p>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/loganfsmyth/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/loganfsmyth">@loganfsmyth</a></p>
</blockquote>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import 'foo';
export {foo} from 'bar';"><pre class="notranslate"><code class="notranslate">import 'foo';
export {foo} from 'bar';
</code></pre></div>
<h3 dir="auto">Description</h3>
<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
});
exports.foo = undefined;

var _bar = require('bar');

Object.defineProperty(exports, 'foo', {
  enumerable: true,
  get: function get() {
    return _bar.foo;
  }
});

require('foo');"><pre class="notranslate"><code class="notranslate">'use strict';

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

var _bar = require('bar');

Object.defineProperty(exports, 'foo', {
  enumerable: true,
  get: function get() {
    return _bar.foo;
  }
});

require('foo');
</code></pre></div>
<p dir="auto">Note that <code class="notranslate">foo</code> loads after <code class="notranslate">bar</code>.</p>